HTML: Адаптивный блок div по центру

В данной примере покажем самый простой способ, как поместить блок div по центру страницы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Adaptive box and title</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="strut"></div>
    <div id="wrapper">
        <h1>Centered!</h1>
    </div>
</body>
</html>

html {height: 100%;}

body {
margin: 0;
height: 100%;
text-align: center;
}

.strut {
display: inline-block;
vertical-align: middle;
height: 100%;
}

#wrapper {
display: inline-block;
vertical-align: middle;
width: 90vw;
height: 40vh;
margin: 0 auto;
background-color: #444;
}

h1 {
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: normal;
font-size: 5vw;
line-height: 40vh;
}

Прокомментируйте первым...

Обратная связь