Как горизонтально центрировать <div>? - PullRequest
Новая
       424

Как горизонтально центрировать <div>?

3967 голосов
/ 22 сентября 2008

Как я могу горизонтально центрировать <div> внутри другого <div> с помощью CSS? 

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Ответы [ 98 ]

19 голосов
/ 20 сентября 2014

Если кому-то нужно решение jQuery для центра, выровняйте эти div: 

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
18 голосов
/ 05 ноября 2013

Попробуйте поиграть с 

margin: 0 auto;

Если вы тоже хотите расположить текст по центру, попробуйте использовать: 

text-align: center;
9 голосов
/ 04 апреля 2019

Вы можете просто использовать flexbox следующим образом: 

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Применить Autoprefixer для поддержки всех браузеров: 

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

ИЛИ ЕЩЕ

использовать преобразование : 

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

с автопрефиксатором: 

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
9 голосов
/ 12 февраля 2019

Начиная с 2019 года, поскольку этот вопрос по-прежнему встречается много раз, очень простой и кросс-браузерный ответ на горизонтальный центр - применить это правило к родительскому элементу: 

.parentBox {
 display: flex;
 justify-content: center
}
8 голосов
/ 11 марта 2017

CSS 3:

Вы можете использовать следующий стиль в родительском контейнере для равномерного распределения дочерних элементов по горизонтали: 

display: flex;
justify-content: space-between;  // <-- space-between or space-around

Хороший DEMO относительно различных значений для justify-content.

Enter image description here

CanIUse: Совместимость с браузерами

Попробуйте!: 

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>
8 голосов
/ 06 июня 2013

Я применил встроенный стиль для внутреннего div. Используйте это. 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
7 голосов
/ 31 октября 2013

Хорошая вещь, которую я недавно обнаружил, смешивая использование line-height + vertical-align и 50% левого трюка, вы можете center ящик динамического размера внутри другого бокса динамического размера, как по горизонтали, так и по вертикали, используя чистый CSS.

Обратите внимание, что вы должны использовать span (и inline-block), протестированные в современных браузерах + IE8. HTML: 

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS: 

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

См. Пример здесь .

7 голосов
/ 01 ноября 2016

Этого можно добиться с помощью CSS Flexbox . Вам просто нужно применить 3 свойства к родительскому элементу, чтобы все заработало. 

#outer {
  display: flex;
  align-content: center;
  justify-content: center;
}

Посмотрите на приведенный ниже код, который поможет вам лучше понять свойства.

Узнайте больше о CSS Flexbox 

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
7 голосов
/ 15 мая 2015 
#inner {
    width: 50%;
    margin: 0 auto;
}
6 голосов
/ 01 октября 2013

Как насчет ниже CSS для #inner div: 

#inner {
  width: 50%;
  margin-left: 25%;
}

Я в основном использую этот CSS для центрирования div.

Страница:
...