98 Вопрос: Как горизонтально центрировать <div>?

вопрос создан в Tue, Oct 30, 2018 12:00 AM

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

 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
    
3992
  1. Из этих замечательных ответов я просто хочу подчеркнуть, что вы должны дать "#inner" значение "width", иначе оно будет равно "100%", и вы можете не говорите, если это уже по центру.
    2017-11-07 08: 22: 14Z
30 ответов                              30                         

Вы можете применить этот CSS к внутреннему <div>:

 
#inner {
  width: 50%;
  margin: 0 auto;
}

Конечно, вам не нужно устанавливать width на 50%. Любая ширина меньше, чем содержащаяся <div> будет работать. margin: 0 auto - это то, что делает фактическое центрирование.

Если вы нацеливаетесь на IE8 +, возможно, лучше иметь это вместо этого:

 
#inner {
  display: table;
  margin: 0 auto;
}

Он сделает внутренний элемент центрированным по горизонтали и работает без установки определенного width.

Рабочий пример здесь:

р>

 
#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
    
4430
2019-06-06 18: 45: 25Z
  1. Для вертикального центрирования я обычно использую "line-height" (line-height == height). Это просто и приятно, но работает только с однострочным текстом содержимого:)
    2010-06-23 12: 36: 47Z
  2. Вы должны использовать тег! DOCTYPE на своей html-странице, чтобы он хорошо работал в IE.
    2012-01-28 14: 23: 14Z
  3. Обратите внимание, что может потребоваться добавить "float: none;" для #inner.
    2013-09-27 08: 30: 50Z
  4. Вы также устанавливаете верхнее и нижнее поля равными 0, что не связано. Думаю, лучше поставить margin-left: auto; margin-right: auto.
    2014-02-08 22: 45: 47Z
  5. Не обязательно margin:0 auto: это может быть margin: <whatever_vertical_margin_you_need> auto секунда, будучи горизонтальным полем.
    2016-05-03 19: 07: 32Z

Если вы не хотите устанавливать фиксированную ширину на внутренней div, вы можете сделать что-то вроде этого:

р>

 
#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Это превращает внутренний div во встроенный элемент, который можно центрировать с помощью text-align.

    
1184
2017-11-22 11: 34: 02Z
  1. @ SabaAhang правильный синтаксис для этого будет float: none; и, вероятно, необходим только потому, что #inner унаследовал float из left или right из другого места в вашем CSS.
    2015-11-12 09: 21: 37Z
  2. Это хорошее решение. Просто имейте в виду, что inner унаследует text-align, поэтому вы можете захотеть установить для text-align inner значение initial или другое значение.
    2016-11-18 21: 52: 45Z

Лучшие подходы - это CSS 3 .

Модель бокса:

р>

 
#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

В зависимости от удобства использования вы также можете использовать свойства box-orient, box-flex, box-direction.

Flex

 
#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Подробнее о центрировании дочерних элементов

И это объясняет, почему блочная модель - лучший подход .

347
2019-05-15 13: 38: 09Z
  1. это также работает для меня, когда у внутреннего div есть float: left;
    2012-11-12 06: 30: 08Z
  2. Обязательно прочитайте этот ответ , прежде чем приступить к работе. реализации этого решения.
    2013-04-24 18: 51: 58Z
  3. На данный момент Safari все еще требует -webkit флагов для flexbox (display: -webkit-flex; и -webkit-align-items: center; и -webkit-justify-content: center;)
    2015-07-23 15: 59: 08Z

Предположим, что ваш div имеет ширину 200px:

 
.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Убедитесь, что родительский элемент позиционирован , то есть относительно, фиксированный, абсолютный или липкий.

Если вы не знаете ширину вашего div, вы можете использовать transform:translateX(-50%); вместо отрицательного поля.

https://jsfiddle.net/gjvfxxdj/

    
237
2017-09-25 10: 48: 50Z
  1. Это не работает в Safari
    2015-08-08 09: 05: 45Z
  2. Мне не нравится это решение, потому что, когда внутренний элемент слишком широк для экрана, вы не можете прокручивать весь элемент по горизонтали. margin: 0 auto работает лучше.
    2015-12-30 04: 02: 09Z
  3. почему вы оставляете поле слева: -100, это не сработает
    2016-11-29 23: 51: 04Z
  4. Я читал, что это единственный метод, который будет работать в IE6 /7
    2017-10-31 07: 25: 04Z
  5. margin-left: auto; поле справа: авто; центрирует элемент уровня блока
    2017-11-10 19: 15: 55Z

Я создал этот пример , чтобы показать, как вертикально и по горизонтали align.

Код в основном такой:

 
#outer {
  position: relative;
}

и ...

 
#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

и он останется в center даже после изменения размера экрана.

    
218
2017-08-18 10: 35: 29Z
  1. + 1 для этого метода, я собирался ответить им. Обратите внимание, что вы должны объявить ширину элемента, который вы хотите центрировать по горизонтали (или высоту, если центрируете по вертикалиют). Вот подробное объяснение: codepen.io/shshaw/full/gEiDt . Один из наиболее универсальных и широко поддерживаемых методов центрирования элементов по вертикали и /или по горизонтали.
    2013-12-16 18: 27: 12Z
  2. Вы не можете использовать отступы внутри div, но если вы хотите создать иллюзию, используйте рамку того же цвета.
    2014-07-09 11: 45: 32Z
  3. Я думаю, что для того, чтобы этот метод работал, вам нужно установить with и высоту внутреннего div
    2015-11-29 21: 39: 00Z

На некоторых плакатах упоминается способ центрирования CSS 3 с использованием display:box.

Этот синтаксис устарел и больше не должен использоваться. [См. Также этот пост] .

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

Итак, если у вас есть простая разметка, например:

 
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... и вы хотите расположить свои элементы по центру, вот что вам нужно на родительском элементе (.box):

 
.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

р>

 
.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Если вам нужна поддержка старых браузеров, использующих более старый синтаксис для flexbox, вот - хорошее место, чтобы посмотреть . р>     

185
2018-03-17 20: 14: 23Z
  1. что вы подразумеваете под "синтаксис устарел", является ли он устаревшим?
    2013-09-06 10: 18: 39Z
  2. Спецификация Flexbox прошла 3 основных ревизии. Самый последний проект от сентября 2012 года, который официально устарел все предыдущие проекты. Тем не менее, поддержка браузеров не очень удобна (особенно старые браузеры Android): stackoverflow.com/questions/15662578/…
    2013-10-01 20: 33: 33Z
  3. Это сработало для меня в Chrome, когда версия Джастина Полия не сработала.
    2016-06-29 02: 50: 17Z
  4. Не является ли "justify-content: center;" для вертикального выравнивания и "align-items: center;" для горизонтального выравнивания?
    2017-03-22 12: 04: 47Z
  5. @ WouterVanherck это зависит от значения
    .box {
      display: flex;
      flex-wrap: wrap;
      /* Optional. only if you want the items to wrap */
      justify-content: center;
      /* For horizontal alignment */
      align-items: center;
      /* For vertical alignment */
    }
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    .box {
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      border: 2px solid tomato;
    }
    .box div {
      margin: 0 10px;
      width: 100px;
    }
    .item1 {
      height: 50px;
      background: pink;
    }
    .item2 {
      background: brown;
      height: 100px;
    }
    .item3 {
      height: 150px;
      background: orange;
    }
    . Если это «строка» (по умолчанию), то
    <div class="box">
      <div class="item1">A</div>
      <div class="item2">B</div>
      <div class="item3">C</div>
    </div>
    для горизонтального выравнивания (как я уже упоминал в ответе). Если это «столбец», то flex-direction для вертикального выравнивания.
    2017-03-22 12: 29: 34Z

Если вы не хотите устанавливать фиксированную ширину и не хотите дополнительного поля, добавьте justify-content: center; к своему элементу.

Вы можете использовать:

 justify-content: center;     
131
2013-10-29 17: 23: 42Z
  1. те же требования, что и для display: inline-block тоже ( quirksmode.org/css/display.html )
    2012-09-11 15: 09: 05Z
  2. Я использовал это, чтобыо, но я никогда не сталкивался с display: inline-block раньше. Что это делает?
    2017-07-31 11: 25: 46Z

Центрирование div неизвестной высоты и ширины

По горизонтали и вертикали. Он работает с достаточно современными браузерами (Firefox, Safari /WebKit, Chrome, Internet Explorer 10, Opera и т. Д.)

р>

 
#element {
    display: table;
    margin: 0 auto;
}

Поработайте с ним далее на Codepen или на JSBin .

    
85
2018-03-17 18: 49: 52Z

Он не может быть центрирован, если вы не дадите ему ширину, иначе он займет по умолчанию все горизонтальное пространство.

    
83
2011-05-09 17: 23: 41Z
  1. и если вы не знаете ширину? Скажите, потому что контент динамический?
    2011-06-02 15: 45: 28Z
  2. максимальная ширина? что насчет этого?
    2018-03-17 22: 32: 19Z
83
2013-10-29 17: 23: 48Z
  1. Обязательно прочитайте этот ответ , прежде чем приступить к работе. реализации этого решения.
    2013-04-24 18: 52: 25Z

Установите

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
и установите
#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
и width на margin-left. Это только для горизонтали . Если вы хотите оба пути, вы должны сделать это обоими способами. Не бойся экспериментировать; это не значит, что ты что-то сломаешь.     
81
2018-03-17 19: 11: 15Z

Мне недавно пришлось центрировать «скрытый» div (то есть display: none;), который имел внутри себя табличную форму, которую нужно было центрировать на странице. Я написал следующий jQuery для отображения скрытого div & затем обновите CSS до автоматически сгенерированной ширины таблицы и измените поле, чтобы отцентрировать его. (Переключение дисплея вызывается нажатием на ссылку, но этот код отображать не обязательно.)

ПРИМЕЧАНИЕ. Я делюсь этим кодом, потому что Google привел меня к этому решению для переполнения стека & все бы работало, за исключением того, что скрытые элементы не имеют ширины & нельзя изменить /отцентрировать до тех пор, пока они не отобразятся.

р>

 margin-right
    
58
2016-08-04 13: 09: 15Z

Обычно я использую абсолютную позицию:

 auto

Внешний div не нуждается в дополнительных свойствах, чтобы это работало.

    
54
2016-05-31 13: 19: 25Z
  1. Это может не сработать, если у вас есть другие элементы div ниже центрированного элемента div.
    2018-07-26 07: 59: 28Z

Для Firefox и Chrome:

р>

 
$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Для Internet Explorer, Firefox и Chrome:

р>

 
#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Свойство

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>
является необязательным для современных браузеров, но оно необходимо в режиме причуд Internet Explorer для поддержки устаревших браузеров.     
51
2018-03-17 19: 13: 38Z
  1. Нет необходимости для свойства выравнивания текста. Это совершенно не нужно.
    2013-05-23 05: 29: 18Z
  2. text-align действительно необходим для работы в режиме quicks IE, поэтому, если вы не возражаете, добавьте небольшое выражение для поддержки старых браузеров, сохраните его там. (IE8 с правилами IE8 и IE7 работают без выравнивания текста, так что, возможно, это касается только IE6 и старше)
    2017-11-04 02: 02: 51Z

Это мой ответ.

р>

 
<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
    
46
2017-02-24 08: 37: 33Z

Другое решение для этого без необходимости устанавливать ширину для одного из элементов - использовать атрибут CSS 3 text-align:.

 
#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Хитрость в том, что transform устанавливает элемент

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}
на 50 процентов слева от его собственной ширины. Вы можете использовать тот же трюк для вертикального выравнивания.

Вот Fiddle , показывающий горизонтальное и вертикальное выравнивание. р>

Дополнительную информацию можно найти в сети разработчиков Mozilla а>. р>     

42
2018-03-17 19: 08: 29Z
  1. Также могут понадобиться префиксы поставщиков: translateX(-50%)
    2015-09-02 13: 48: 49Z

Крис Койер, который написал отличный пост на тему «Центрирование в неизвестном» 'в своем блоге. Это сводка нескольких решений. Я опубликовал тот, который не опубликован в этом вопросе. У него больше поддержки браузеров, чем у flexbox-решения, и вы не используете #inner, что может сломать другие вещи.

 -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);     
40
2016-03-10 16: 50: 26Z

Я понимаю, что довольно поздно опаздываю к игре, но это очень популярный вопрос, и недавно я нашел подход, о котором я нигде здесь не упоминал, поэтому я решил, что задокументирую его.

 display: table;

РЕДАКТИРОВАТЬ: оба элемента должны быть одинаковой ширины для правильного функционирования.

    
35
2013-07-19 14: 16: 43Z
  1. Просто установите это правило только для
    /* This parent can be any width and height */
    .outer {
      text-align: center;
    }
    
    /* The ghost, nudged to maintain perfect centering */
    .outer:before {
      content: '.';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      width:0;
      overflow:hidden;
    }
    
    /* The element to be centered, can
       also be of any width and height */ 
    .inner {
      display: inline-block;
      vertical-align: middle;
      width: 300px;
    }
    
    :
    #outer {
        position: absolute;
        left: 50%;
    }
    
    #inner {
        position: relative;
        left: -50%;
    }
    
    . Это работает для любой ширины.
    2015-11-24 10: 30: 28Z

Например, см. эту ссылку и фрагмент ниже:

р>

 #inner

Если у вас много детей от одного из родителей, значит, ваш контент CSS должен быть таким примером на скрипке . р>

HTML-контент выглядит так:

 #inner { position:relative; left:50%; transform:translateX(-50%); }

Тогда посмотрите этот пример на скрипке .

    

30
2018-03-17 18: 44: 36Z

Центрирование только по горизонтали

По моему опыту, лучший способ центрировать прямоугольник по горизонтали - применить следующие свойства:

Контейнер:

  • должно иметь
    div#outer {
      height: 120px;
      background-color: red;
    }
    
    div#inner {
      width: 50%;
      height: 100%;
      background-color: green;
      margin: 0 auto;
      text-align: center; /* For text alignment to center horizontally. */
      line-height: 120px; /* For text alignment to center vertically. */
    }
    <div id="outer" style="width:100%;">
      <div id="inner">Foo foo</div>
    </div>

Поле содержимого:

  • должно иметь
    <div id="outer" style="width:100%;">
        <div class="inner"> Foo Text </div>
        <div class="inner"> Foo Text </div>
        <div class="inner"> Foo Text </div>
        <div class="inner"> </div>
        <div class="inner"> </div>
        <div class="inner"> </div>
        <div class="inner"> </div>
        <div class="inner"> </div>
        <div class="inner"> Foo Text </div>
    </div>
    

Демо:

р>

 text-align: center;

См. также эту скрипку !

Центрирование по горизонтали и усилению; по вертикали

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

Внешний контейнер:

  • должно иметь display: inline-block;

Внутренний контейнер:

  • должно иметь
    .container {
      width: 100%;
      height: 120px;
      background: #CCC;
      text-align: center;
    }
    
    .centered-content {
      display: inline-block;
      background: #FFF;
      padding: 20px;
      border: 1px solid #000;
    }
    <div class="container">
      <div class="centered-content">
        Center this!
      </div>
    </div>
  • должно иметь display: table;
  • должно иметь display: table-cell;

Поле содержимого:

  • должно иметь vertical-align: middle;

Демо:

р>

 text-align: center;

См. также эту скрипку !

    
27
2018-03-17 15: 41: 02Z

Самый простой способ:

р>

 display: inline-block;
    
26
2018-03-17 18: 51: 04Z
  1. Как следует из вашей скрипки, у #inner должна быть установлена ​​ширина.
    2015-02-05 21: 06: 57Z
  2. .outer-container {
      display: table;
      width: 100%;
      height: 120px;
      background: #CCC;
    }
    
    .inner-container {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    
    .centered-content {
      display: inline-block;
      background: #FFF;
      padding: 20px;
      border: 1px solid #000;
    }
    <div class="outer-container">
      <div class="inner-container">
        <div class="centered-content">
          Center this!
        </div>
      </div>
    </div>
    не нужно никаких
    #outer {
      width: 100%;
      text-align: center;
    }
    #inner {
      margin: auto;
      width: 200px;
    }
    <div id="outer">
      <div id="inner">Blabla</div>
    </div>
    , так как #outer по умолчанию всегда имеет width:100%;. и <div> также не является необходимым вообще.
    2019-05-06 22: 57: 27Z

Если ширина содержимого неизвестна, вы можете использовать следующий метод . Предположим, у нас есть эти два элемента:

  •  width:100% - полная ширина
  •  text-align:center - ширина не задана (но можно указать максимальную ширину)

Предположим, что вычисленная ширина элементов составляет 1000 пикселей и 300 пикселей соответственно. Действуйте следующим образом:

  1. Оберните .outer внутри .inner
  2. Сделайте .inner встроенным блоком; он становится того же размера, что и .center-helper, что делает его шириной 300 пикселей.
  3. Нажмите .center-helper на 50% вправо относительно своего родителя; это оставляет его слева в 500px по отношению к. наружный.
  4. Нажмите .inner на 50% слева от своего родителя; это оставляет его слева в -150px по отношению к. свведите помощник, что означает, что его левый находится в 500 - 150 = 350 пикселей по отношению к. наружный.
  5. Установите переполнение на .center-helper на скрытое, чтобы предотвратить горизонтальную полосу прокрутки.

Демо:

р>

 .inner
 .outer     
25
2018-03-17 21: 12: 05Z

Вы можете сделать что-то вроде этого

 
body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Это также выровняет

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
по вертикали. Если вы не хотите, удалите свойства
#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}
и #inner;     
24
2013-10-16 17: 08: 20Z

Вот то, что вы хотите кратчайшим образом.

JSFIDDLE

 display     
24
2015-11-09 03: 35: 03Z
  1. Это центрирует его вертикально.
    2015-02-06 00: 24: 56Z

Выравнивание текста: по центру

Применение vertical-align встроенное содержимое центрируется внутри строки. Однако, поскольку внутренний div имеет по умолчанию

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}
, вы должны установить конкретную ширину или использовать один из следующих:

р>

 display: inline

Маржа: 0 авто

Использование display: inline-block это еще один вариант, и он больше подходит для совместимости со старыми браузерами. Он работает вместе с

. р>

р>

 
#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
 
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

margin: 0 auto a> ведет себя как блочный элемент и размещает его содержимое в соответствии с моделью flexbox. Он работает с display: table . . р>

Обратите внимание: Flexbox совместим с большинством браузеров, но не со всеми. См. здесь для получения полного и актуального списка совместимости браузеров.

р>

 
#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
 
#inner {
  display: table;
  margin: 0 auto;
}

Transform

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
a> позволяет вам изменить координатное пространство модели визуального форматирования CSS. Используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. Для центрирования по горизонтали требуется display: flex a> и justify-content: center .

р>

 
#inner {
  display: inline-block;
}

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

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

 
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
(устарело)

Тег transform: translate a> является HTML-альтернативой position: absolute. . Он работает в старых браузерах и большинстве новых, но не считается хорошей практикой, поскольку эта функция устарел и удален из веб-стандартов.

р>

 left: 50%
    

22
2017-08-25 07: 13: 20Z

Вы можете использовать

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
для своего внешнего делителя, а для горизонтального центрирования вы должны добавить
#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
 
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

или вы можете посетить w3schools - CSS flex Property для получения дополнительных идей.

    
22
2018-08-20 12: 57: 40Z

Этот метод также отлично работает:

 <center>

Для внутреннего <center> единственным условием является то, что его text-align: center и

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>
не должны быть больше, чем у его контейнера.     
21
2016-09-23 06: 49: 46Z

Flex обеспечивает более 97% поддержки браузеров и может быть лучшим способом решения подобных проблем в несколько строк:

 
#inner {
  display: inline-block;
}
    
21
2018-03-17 18: 34: 17Z

Мне удалось найти решение, которое, возможно, подойдет для любой ситуации, но использует JavaScript:

Вот структура:

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

А вот фрагмент кода JavaScript:

 display: flex

Если вы хотите использовать его адаптивно, вы можете добавить следующее:

 justify-content: center     
21
2018-03-17 18: 47: 53Z

Существовал один вариант, который я нашел:

Все говорят, чтобы использовать:

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

Но есть и другой вариант. Установите это свойство для родительского div. Это работает отлично в любое время:

 
div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

И посмотри, детский центр.

И, наконец, CSS для вас:

 <div>     
20
2018-03-17 18: 38: 49Z
  1. работа по выравниванию текста для выравнивания текста в его контейнере, а не для его контейнера с его родителем.
    2013-12-04 07: 32: 36Z
  2. Я проверяю это, у меня проблема с установкой дочернего элемента в центр, должен, когда у вас есть более одного дочернего элемента, больше раз поле: 0 автоматический ответ шрифта, но центр выравнивания текста , для родителя сделайте этот дочерний элемент центром, даже если они являются элементом, а не текстом, протестируйте и посмотрите, что произойдет
    2013-12-04 08: 35: 28Z
  3. только текст по центру выравнивания текста. Вы правы в данный момент, но когда вы пишете контейнер CSS, который содержит дочерний элемент с разной шириной и цветом, ваш код не работает. Проверьте это снова !!!!
    2013-12-04 09: 23: 49Z
  4. См. этот пример jsfiddle.net/uCdPK/2 и скажите, что вы об этом думаете !!!!!
    2013-12-04 10: 03: 06Z
height
источник размещен Вот