Создаем вертикальное выравнивание, которое будет проходить при помощи CSS, где делаем центрирование div внутри другого div, где задействуем стилистику. Есть моменты, когда у вас есть контейнер Div внутри контейнера Div, и вам необходимо централизовать внутренний контейнер Div вдоль горизонтальной оси. Возможно, вы пытались настроить align = ”center”, но это устарело.
Эффект может быть просто достигнут путем применения CSS к внутреннему контейнеру div, который должен быть горизонтально централизован. Это обеспечит аккуратное размещение содержимого во внутреннем контейнере в обозначенной области, определяемой внешним контейнером.
Вертикальное + горизонтальное выравнивание
HTML
Код
<div id="kasanued-samipokam">
<div id="dokasen-ledsamun"></div>
</div>
CSS
Код
#kasanued-samipokam {
background: #147d1d;
width: 280px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
#dokasen-ledsamun {
background: #e21149;
width: 95px;
height: 95px;
}
Демонстрация
Вариант CSS №1
Следующий код CSS горизонтально центрирует внутренний контейнер div.
Код
#inner {
margin: 0 auto;
}
Помните, что ширина внутреннего контейнера div, если ширина определяется, должна быть меньше, чем внешний контейнер div. Атрибут margin выполняет фактическое горизонтальное центрирование. Для Internet Explorer 8 и более поздних версий вы можете попробовать этот код CSS вместо этого:
Код
#inner {
display: table;
margin: 0 auto;
}
Он центрируется горизонтально, не требуя определения ширины. Помните, что для правильной работы CSS в IE8 + на странице HTML потребуется тег! DOCTYPE.
Вариант CSS №2
Хотя вариант 1 является предпочтительным, существует другой метод. Тем не менее, это может не работать со всеми браузерами. Предполагая, что контейнер div имеет ширину 300 пикселей, можно использовать следующий код:
Код
.centered {
position: absolute;
left: 50%;
margin-left: -150px;
}
Это не подходит для очень широких контейнеров.
Вариант CSS №3
Если вы хотите центрировать внутренний контейнер div по горизонтали и вертикали, тогда может пригодиться следующий код:
Код
#outer {
position: relative;
}
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
Важно учитывать плюсы и минусы каждого варианта и помнить, что все больше интернет-пользователей теперь получают доступ к Интернету через мобильные устройства, такие как планшеты и смартфоны. Вы хотите убедиться, что код CSS будет обслуживать различные размеры экрана.
