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

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

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3678
задан Lukas 22 сент. '08 в 15:27
источник поделиться
92 ответов

Вы можете применить этот 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;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
4147
ответ дан Justin Poliey 22 сент. '08 в 15:29
источник поделиться

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

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

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

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

1122
ответ дан Alfred 21 янв. '11 в 1:55
источник поделиться

Лучшие подходы к 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%;
}

В соответствии с вашей практичностью вы также можете использовать свойства box-orient, box-flex, box-direction.

Flex:

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

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

И это объясняет, почему модель коробки лучше всего подходит:

304
ответ дан Konga Raju 30 авг. '12 в 15:05
источник поделиться

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

217
ответ дан nuno_cruz 01 дек. '11 в 22:52
источник поделиться

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

В основном это код:

#outer {
  position: relative;
}

и...

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

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

200
ответ дан Tom Maton 11 сент. '13 в 14:32
источник поделиться

Некоторые плакаты упоминали о том, как использовать 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 , это хорошее место для просмотра.

158
ответ дан Danield 22 апр. '13 в 13:32
источник поделиться

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

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

#element {
    display: table;
    margin: 0 auto;
}
120
ответ дан Salman Abbas 13 мая '12 в 2:45
источник поделиться

Свойство box-align CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
75
ответ дан neoneye 11 марта '12 в 16:37
источник поделиться

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

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

.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>

Погрузите его дальше на Codepen или на JSBin.

74
ответ дан iamnotsam 17 мая '14 в 21:38
источник поделиться

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

74
ответ дан gizmo 22 сент. '08 в 15:30
источник поделиться

Установите width и установите margin-left и margin-right в auto. Это только для горизонтальных. Если вы хотите в обоих направлениях, вы просто сделаете это в обоих направлениях. Не бойтесь экспериментировать; это не так, как будто ты сломаешь что-нибудь.

71
ответ дан Sneakyness 25 июля '09 в 1:00
источник поделиться

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

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

$(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>
51
ответ дан James Moberg 24 июня '11 в 0:42
источник поделиться

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

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

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

45
ответ дан william44isme 07 апр. '13 в 11:22
источник поделиться

Для Firefox и Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Для Internet Explorer, Firefox и Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Свойство text-align: является обязательным для современных браузеров, но оно необходимо в режиме Quirks Internet Explorer для поддержки устаревших браузеров.

43
ответ дан ch2o 31 мая '12 в 18:32
источник поделиться

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

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>
40
ответ дан Ankit Jain 19 июля '13 в 13:21
источник поделиться

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

Фокус в том, что translateX(-50%) устанавливает элемент #inner 50 процентов слева от его собственной ширины. Вы можете использовать тот же трюк для вертикального выравнивания.

Здесь Fiddle показывает горизонтальное и вертикальное выравнивание.

Дополнительная информация о Mozilla Developer Network.

37
ответ дан Kilian Stinson 12 марта '15 в 17:01
источник поделиться

Крис Койер, который написал отличный пост в разделе "Центрирование в неизвестном" в своем блоге. Это обзор нескольких решений. Я отправил сообщение, которое не опубликовано в этом вопросе. У него больше поддержка браузера, а затем flexbox -решение, и вы не используете display: table;, который может сломать другие вещи.

/* 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;
}
37
ответ дан Willem de Wit 25 окт. '13 в 14:53
источник поделиться

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

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDIT: оба элемента должны быть одинаковой ширины для правильной работы.

30
ответ дан BenjaminRH 27 мая '13 в 19:12
источник поделиться

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

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>

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

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

<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>

Затем посмотрите этот пример на скрипке.

27
ответ дан Lalit Kumar 04 дек. '13 в 10:30
источник поделиться

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

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

Контейнер:

  • должен иметь 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;

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

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

Демо-версия:

.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>

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

25
ответ дан John Slegers 19 февр. '16 в 19:57
источник поделиться

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

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>
25
ответ дан joan16v 22 авг. '14 в 15:10
источник поделиться

Вот что вы хотите в кратчайшие сроки.

JSFIDDLE

#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 % );
}
23
ответ дан caniz 28 янв. '14 в 12:55
источник поделиться

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

#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 по вертикали. Если вы не хотите, удалите свойства display и vertical-align;

21
ответ дан Kenneth Palaganas 14 окт. '13 в 15:09
источник поделиться

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

Здесь структура:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

И здесь фрагмент JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

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

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});
20
ответ дан Miguel Leite 11 февр. '14 в 18:51
источник поделиться

Text-align: center

Применяя text-align: center, встроенное содержимое центрируется в поле строки. Однако, поскольку внутренний div по умолчанию width: 100%, вы должны установить определенную ширину или использовать одно из следующих значений:

#inner {
  display: inline-block;
}

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

Маржа: 0 auto

Использование margin: 0 auto является еще одним вариантом и более подходит для совместимости старых браузеров. Он работает вместе с display: table.

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

Flexbox

display: flex ведет себя как элемент блока и выводит его содержимое в соответствии с моделью flexbox. Он работает с justify-content: center.

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

#inner {
  display: inline-block;
}

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

Transform

transform: translate позволяет изменять пространство координат модели визуального форматирования CSS. Используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. Чтобы центрировать по горизонтали, требуется position: absolute и left: 50%.

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

<center> (устаревший)

Тег <center> является альтернативой HTML text-align: center. Он работает в старых браузерах и большинстве новых, но это не считается хорошей практикой, поскольку эта функция obsolete и удалена из веб-стандарты.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>
19
ответ дан Paolo Forgia 09 июня '17 в 11:34
источник поделиться

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

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

Для внутреннего <div> единственное условие состоит в том, что его height и width не должны быть больше, чем у его контейнера.

19
ответ дан Billal Begueradj 23 сент. '16 в 9:49
источник поделиться

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

#outer {
  display: flex;
  justify-content: center;
}
17
ответ дан Sandesh Damkondwar 03 апр. '17 в 23:12
источник поделиться

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

margin: 0 auto;

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

text-align: center;
17
ответ дан user1817972 05 нояб. '13 в 18:21
источник поделиться

Один из вариантов, который я нашел:

Все говорят:

margin: auto 0;

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

text-align: center;

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

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

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}
17
ответ дан Pnsadeghy 16 нояб. '13 в 22:56
источник поделиться

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

  • .outer - полная ширина
  • .inner - нет ширины (но может быть указана максимальная ширина)

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

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

Демо-версия:

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%;
}
16
ответ дан Salman A 17 янв. '14 в 21:18
источник поделиться

Другие вопросы по меткам или Задайте вопрос