Простейший способ центрирования div

Для веб-разработчика иногда центрирование div является самой сложной задачей.
Поэтому я предлагаю вам самый простой способ центрирования div.
Вот html-код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
    </style>
</head>
<body>
    <div id="parentContainer">
        <div id="childContainer"></div>
    </div>
</body>
</html>
Войти в полноэкранный режим Выйти из полноэкранного режима

Я создал два div в теле. Один из них имеет id parentContainer, а другой — childContainer.
Позвольте мне поделиться с вами кодом css.

#parentContainer{
    width: 400px;
    height: 400px;
    background-color: brown;
}
#childContainer{
    width: 100px;
    height: 100px;
    background-color: black;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Я просто задал высоту 400px, ширину 400px и цвет фона brown для parentContainer.
Аналогично я задал высоту 100px, ширину 100px и черный цвет фона для childContainer.
Наш div еще не отцентрирован, давайте покажу вам, ребята.

Свойство position в css используется для задания расположения элемента на странице. Значение по умолчанию для элемента position — статическое. Другие значения для элемента position — relative, absolute, fixed и sticky.
Теперь, если мы установим position: absolute; для элемента DOM, он станет абсолютным по отношению ко всей странице. Это будет полезно, если мы хотим выровнять div по центру относительно всей страницы.

С другой стороны, если задать position: relative; родительскому элементу, то дочерний элемент (с position: absolute;) станет абсолютным, связанным с родительским элементом, а не со всей страницей.
Теперь, если мы укажем top: 0;, left: 0;, bottom: 0; и right: 0;, с margin: auto; и позиционируем элементы в контейнерах, это центрирует наш div.

#parentContainer{
    position: relative;
    width: 400px;
    height: 400px;
    background-color: brown;
}
#childContainer{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Поздравляем, вы установили ваш div по центру.

Оцените статью
devanswers.ru
Добавить комментарий