Как горизонтально центрировать <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;
}

См. https://v4-alpha.getbootstrap.com/examples/cover/

Для горизонтального центра 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>
.outer {
    text-align: center;
    width: 100%
}

Центрирование: Авто-ширина поля

Это поле отцентрировано по горизонтали, установив для его ширины правого и левого полей значение "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;
}

http://bluerobot.com/web/css/center1.html

Другие вопросы по тегам