Как сделать выравнивание дочерних блоков по середине окна браузера?

Здравствуйте!

index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="main aqua">1
        <div class="main brown">2
            <div class="main darkkhaki">3
                <div class="main hotpink">4
                    <div class="main lavender">
                        5
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
style.css
html,
body {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main {
    position: absolute;
    width: 70%;
    height: 70%;
    border: 1px solid #000;
}

.aqua {
    background-color: aquamarine;
}

.brown {
    background-color: brown;
}

.darkkhaki {
    background-color: darkkhaki;
}

.hotpink {
    background-color: hotpink;
}

.lavender {
    background-color: lavender;
}


https://jsfiddle.net/fvm9jux7/1/

Как можно выровнять блоки по середине относительно размеров окна браузера?
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
@bogomazov_vadim
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы