Как горизонтально центрировать <div>?
Как я могу горизонтально центрировать <div>
в другом <div>
используя CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
138 ответов
Если вы хотите центрировать элемент по горизонтали, вы можете сделать следующее:
1. Способ первый : использование flexbox.
#outer{
display: flex;
justify-content: center;
}
Если вы также хотите выровнять по центру по вертикали, просто добавьте align-items: center;. Чтобы это работало, вам нужно задать определенную высоту #outer.
#outer{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
2. Способ 2 : Использование запаса. Чтобы этот метод работал, вам нужно задать #inner определенную ширину.
#inner {
width: 50%;
margin: 0 auto;
}
3. Способ 3 : Использование (поля + перевод). Чтобы это работало, вам нужно задать определенную ширину #inner.
#inner {
width: 50%;
margin-left: 50%;
transform: translateX(-50%);
}
#outer{
display: flex;
width: 100%;
height: 200px;
justify-content:center;
align-items:center;
}
Я думаю, что это будет решением:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Оба элемента должны быть одинаковой ширины, чтобы функционировать по отдельности.
можно использовать центральный тег для удобства
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
Я делюсь этим ответом для дизайнеров, которые хотят выровнять свой контент по горизонтали и вертикали. Или вы можете сказать, в центре веб-страницы. Пожалуйста, перейдите на этот сайт, чтобы загрузить файл.
CSS код
.ver-hor-div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Вы можете использовать ссылку https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview
.outer{
display: table;
width: 100%;
height: 100%;
}
.inner {
vertical-align: middle;
}
Для горизонтального центра DIV
#outer{
width:100%;
text-align:center;
}
#inner{
display:inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Чтобы центрировать элемент по горизонтали, вы можете использовать эти 3 метода:
Метод 1: Использование
margin: 0 auto
. (
margin-left
и
margin-right
установлен авто)
Добавьте CSS в свой внутренний div. Задавать margin: 0 auto
и установите его ширину менее 100%, которая является шириной внешнего div.
<div id="outer" style="width:100%">
<div id="inner" style="margin:0 auto;width:50%">Foo foo</div>
</div>
Это даст желаемый результат.
button {
margin: 0 auto;
width: fit-content;
display: block;
}
// container should have set width (for example 100%)
Flexbox Центрировать по горизонтали и вертикали Центрировать Выровнять элемент
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
<style>
.outer{
text-align: center;
}
.inner{
width: 500px;
margin: 0 auto;
background: brown;
color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">This DIV is centered</div>
</div>
</body>
</html>
Пожалуйста, попробуйте это будет работать без тега центра HTML
<div id="outer" style="width:100%">
<div id="inner" style="text-align:center">Foo foo</div>
</div>
Это может также работать (не используя CSS):
<div id="outer">
<div id="inner" align="center">Foo foo</div>
</div>
<center>
Я избалован самым простым из известных центров?
</center>
Вы можете горизонтально выровнять любой элемент, используя:
<div align=center>
(code goes here)
</div>
Или:
<!-- css here -->
.center-me {
margin: 0 auto;
}
<!-- html here -->
<div class="center-me">
(code goes here)
</div>
Центрирование: Авто-ширина поля
Это поле отцентрировано по горизонтали, установив для его ширины правого и левого полей значение "auto". Это предпочтительный способ выполнения горизонтального центрирования с помощью CSS, который очень хорошо работает в большинстве браузеров с поддержкой CSS 2. К сожалению, Internet Explorer 5/Windows не отвечает на этот метод - недостаток этого браузера, а не методика.
Есть простой обходной путь. (Пауза, пока вы боретесь с тошнотой, вызванной этим словом.) Готов? Internet Explorer 5/Windows неправильно применяет атрибут CSS "text-align" к элементам уровня блока. Объявление "text-align:center" для содержащего элемента уровня блока (часто элемента BODY) горизонтально центрирует прямоугольник в Internet Explorer 5/Windows.
У этого обходного пути есть побочный эффект: атрибут CSS "text-align" наследуется, центрируя встроенный контент. Часто необходимо явно установить атрибут "выравнивание текста" для центрированного поля, чтобы противостоять эффектам обходного пути Internet Explorer 5/Windows. Соответствующий CSS следует.
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
}
#Content {
width: 500px;
margin: 0px auto;
text-align: left;
padding: 15px;
border: 1px dashed #333;
background-color: #EEE;
}