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

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

 <div id="outer">  
  <div id="inner">Foo foo</div>
</div>
 
вопрос задан 22.09.2008
Lukas
4756 репутация

90 ответов


  • 4154 рейтинг

    Вы можете применить этот 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> 

    ответ дан Justin Poliey, с репутацией 15543, 22.09.2008
  • 1122 рейтинг

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

     #outer {
      width: 100%;
      text-align: center;
    }
    
    #inner {
      display: inline-block;
    } 
     <div id="outer">  
        <div id="inner">Foo foo</div>
    </div> 

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

    ответ дан Alfred, с репутацией 6434, 20.01.2011
  • 304 рейтинг

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

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

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

    ответ дан Konga Raju, с репутацией 5989, 30.08.2012
  • 217 рейтинг

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

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

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

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

    https://jsfiddle.net/gjvfxxdj/

    ответ дан nuno_cruz, с репутацией 1106, 1.12.2011
  • 200 рейтинг

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

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

     #outer {
      position: relative;
    }
     

    а также...

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

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

    ответ дан Tom Maton, с репутацией 902, 11.09.2013
  • 158 рейтинг

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

    ответ дан Danield, с репутацией 75427, 22.04.2013
  • 120 рейтинг

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

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

     #element {
        display: table;
        margin: 0 auto;
    }
     
    ответ дан Salman Abbas, с репутацией 17152, 12.05.2012
  • 75 рейтинг

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

     #outer {
        width:100%;
        height:100%;
        display:box;
        box-orient:horizontal;
        box-pack:center;
        box-align:center;
    }
     
    ответ дан neoneye, с репутацией 29516, 11.03.2012
  • 74 рейтинг

    Центрирование 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 .

    ответ дан iamnotsam, с репутацией 3694, 17.05.2014
  • 74 рейтинг

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

    ответ дан gizmo, с репутацией 10246, 22.09.2008
  • 71 рейтинг

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

    ответ дан Sneakyness, с репутацией 3692, 24.07.2009
  • 51 рейтинг

    Недавно мне пришлось сосредоточить «скрытый» 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> 

    ответ дан James Moberg, с репутацией 3087, 23.06.2011
  • 45 рейтинг

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

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

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

    ответ дан william44isme, с репутацией 752, 7.04.2013
  • 43 рейтинг

    Для 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: необязательно для современных браузеров, но оно необходимо в режиме Quikks Internet Explorer для поддержки устаревших браузеров.

    ответ дан ch2o, с репутацией 538, 31.05.2012
  • 40 рейтинг

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

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

    ответ дан Ankit Jain, с репутацией 576, 19.07.2013
  • 38 рейтинг

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

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

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

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

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

    ответ дан Kilian Stinson, с репутацией 2081, 12.03.2015
  • 37 рейтинг

    Крис Койер, который написал замечательный пост в «Центрировании в Неизвестном» в своем блоге. Это обзор нескольких решений. Я отправил сообщение, которое не опубликовано в этом вопросе. У него больше поддержка браузера, а затем - решение 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;
    }
     
    ответ дан Willem de Wit, с репутацией 6016, 25.10.2013
  • 30 рейтинг

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

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

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

    ответ дан BenjaminRH, с репутацией 8949, 27.05.2013
  • 27 рейтинг

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

     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>
     

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

    ответ дан Lalit Kumar, с репутацией 3847, 4.12.2013
  • 25 рейтинг

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

     #outer {
      width: 100%;
      text-align: center;
    }
    #inner {
      margin: auto;
      width: 200px;
    } 
     <div id="outer">
      <div id="inner">Blabla</div>
    </div> 

    ответ дан joan16v, с репутацией 3375, 22.08.2014
  • 25 рейтинг

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

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

    Контейнер:

    • должно быть 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> 

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

    ответ дан John Slegers, с репутацией 26343, 19.02.2016
  • 23 рейтинг

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

    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 % );
    }
     
    ответ дан caniz, с репутацией 21, 28.01.2014
  • 21 рейтинг

    Вы можете сделать что-то подобное

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

    ответ дан Kenneth Palaganas, с репутацией 1064, 14.10.2013
  • 20 рейтинг

    Ну, мне удалось найти решение, которое, возможно, будет соответствовать всем ситуациям, но использует 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);
      })
    });
     
    ответ дан Miguel Leite, с репутацией 84, 11.02.2014
  • 19 рейтинг

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

    Применяя 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 авто

    Использование 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: 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 . Он работает с более старыми браузерами и большинством новых, но это не считается хорошей практикой, поскольку эта функция устарела и удалена из веб-стандартов.

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

    ответ дан Paolo Forgia, с репутацией 4146, 9.06.2017
  • 19 рейтинг

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

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

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

    ответ дан Billal Begueradj, с репутацией 5302, 23.09.2016
  • 17 рейтинг

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

     margin: 0 auto;
     

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

     text-align: center;
     
    ответ дан Josh Mc, с репутацией 5660, 5.11.2013
  • 17 рейтинг

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

    Все говорят:

     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 */
    }
     
    ответ дан Pnsadeghy, с репутацией 976, 16.11.2013
  • 17 рейтинг

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

     #outer {
      display: flex;
      justify-content: center;
    }
     
    ответ дан Sandesh Damkondwar, с репутацией 336, 3.04.2017
  • 16 рейтинг

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

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

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

    1. Обертка .inner внутри .center-helper
    2. Сделайте .center-helper встроенным блоком; он становится такого же размера, как .inner делая его шириной 300 пикселей.
    3. Нажмите .center-helper 50% справа относительно своего родителя; это помещает его влево на 500px wrt. наружный.
    4. Push .inner 50% осталось относительно своего родителя; это помещает его левое на -150px wrt. который означает, что его левый угол равен 500 - 150 = 350px. наружный.
    5. Установите переполнение на .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%;
    }
     
    ответ дан Salman A, с репутацией 165526, 17.01.2014
  • 15 рейтинг

    Если кто-то хочет, чтобы решение jQuery для центра выровняло эти divs:

     $(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;");
    });
     
    ответ дан sarath, с репутацией 385, 20.09.2014
  • 12 рейтинг

    Вы можете использовать display: flex для своего внешнего div, и для горизонтального центра вы должны добавить justify-content: center

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

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

    ответ дан Milan Panigrahi, с репутацией 244, 10.06.2018
  • 7 рейтинг

    CSS 3:

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

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

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

    Введите описание изображения здесь

    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> 

    ответ дан Legends, с репутацией 6695, 11.03.2017
  • 6 рейтинг
    #inner {
        width: 50%;
        margin: 0 auto;
    }
    
    ответ дан anand jothi, с репутацией 45, 15.05.2015
  • 6 рейтинг

    Вы можете достичь этого, используя 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> 

    ответ дан Saurav Rastogi, с репутацией 7670, 1.11.2016
  • 6 рейтинг

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

    Обратите внимание, что вы должны использовать интервалы (и 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;
    }
     

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

    ответ дан Josh Mc, с репутацией 5660, 31.10.2013
  • 6 рейтинг

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

     <div id="outer" style="width:100%">  
        <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
    </div>
     
    ответ дан aamirha, с репутацией 16, 6.06.2013
  • 4 рейтинг

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

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

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

    ответ дан Rajesh, с репутацией 3295, 1.10.2013
  • 3 рейтинг

    Центрируйте div в div

     .outer {
      display: -webkit-flex;
      display: flex;
    
      //-webkit-justify-content: center;							
      //justify-content: center;
      
      //align-items: center;
    
      width: 100%;
      height: 100px;
      background-color: lightgrey;
    }
    
    .inner {
      background-color: cornflowerblue;
      padding: 2rem;
      margin: auto;  
      
      //align-self: center;						
    } 
     <div class="outer">  
      <div class="inner">Foo foo</div>
    </div> 

    ответ дан antelove, с репутацией 597, 23.09.2017
  • 3 рейтинг

    Я просто использую самое простое решение, но оно работает во всех браузерах:

     <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>center a div within a div?</title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
    
                #outer{
                    width: 80%;
                    height: 500px;
                    background-color: #003;
                    margin: 0 auto;
                }
    
                #outer p{
                    color: #FFF;
                    text-align: center;
                }
    
                #inner{
                    background-color: #901;
                    width: 50%;
                    height: 100px;
                    margin: 0 auto;
    
                }
    
                #inner p{
                    color: #FFF;
                    text-align: center;
                }
            </style>
        </head>
    
        <body>
            <div id="outer"><p>this is the outer div</p>
                <div id="inner">
                    <p>this is the inner div</p>
                </div>
            </div>
        </body>
    </html>
     
    ответ дан Gerald Goshorn, с репутацией 65, 19.09.2014
  • 3 рейтинг

    Использование:

     <div id="parent">
      <div class="child"></div>
    </div>
     

    Стиль:

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

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

     #parent {
       display: flex;
       justify-content: center;
       align-items: center;
    }
     
    ответ дан Руслан, с репутацией 151, 27.09.2017
  • 3 рейтинг

    Возможно использование CSS3 flexbox . У вас есть два метода при использовании гибкой коробки.

    1. Установите родительский элемент display:flex; и добавьте свойства {justify-content:center; ,align-items:center;} в свой родительский элемент.

     #outer{
      display: flex;
      justify-content: center;
      align-items: center;
      } 
     <div id="outer" style="width:100%">
      <div id="inner">Foo foo</div>
    </div> 

    1. Установите родительский элемент display:flex и добавьте margin:auto; к дочернему элементу.

     #outer{
      display: flex;
    }
    #inner{
      margin: auto;
    } 
     <div id="outer" style="width:100%">
      <div id="inner">Foo foo</div>
    </div> 

    ответ дан Dream Hunter, с репутацией 2011, 13.01.2017
  • 3 рейтинг

    Он также может быть центрирован по горизонтали и вертикали, используя абсолютное позиционирование, например:

     #outer{
        position: relative;
    }
    
    #inner{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }
     
    ответ дан Agu Dondo, с репутацией 3995, 10.05.2017
  • 3 рейтинг

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

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

    Вы можете узнать больше об этом по этой ссылке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    ответ дан Cyan Baltazar, с репутацией 629, 20.12.2016
  • 2 рейтинг

    Самый известный способ, который широко используется и работает во многих браузерах, включая старые, использует margin как показано ниже:

     #parent {
      width: 100%;
      background-color: #cccccc;
    }
    
    #child {
      width: 30%; /*we need the width*/
      margin: 0 auto; /*this does the magic*/
      color: #ffffff;
      background-color: #000000;
      padding: 10px;
      text-align: center;
    } 
     <div id="parent">
      <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
    </div> 

    Запустите код, чтобы увидеть, как он работает. Также есть две важные вещи, которые вы не можете забыть в своем CSS, когда пытаетесь сосредоточиться таким образом: margin: 0 auto; которые делают его центром div как нужно, плюс не забывайте width ребенка , иначе он не будет центрироваться, как ожидалось!

    ответ дан Alireza, с репутацией 39782, 20.05.2017
  • 2 рейтинг

    Вы можете использовать одну строку кода, всего text-align:center .

    Вот пример:

     #inner {
      text-align:center;
      } 
     <div id="outer" style="width:100%">
      <div id="inner"><button>hello</button></div>
    </div> 

    ответ дан Yahya Essam, с репутацией 534, 2.06.2017
  • 2 рейтинг

    Мне жаль, но этот ребенок с 1990-х годов просто РАБОТАЛ для меня:

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

    Я иду в ад за этот грех?

    ответ дан Heitor, с репутацией 356, 22.07.2017
  • 2 рейтинг

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

    Использование flex:1 на псевдоэлементе заставит их заполнить оставшиеся пространства и принять равный размер, а внутренний контейнер будет центрирован.

     .container {
      display: flex;
      border: 1px solid;
    }
    
    .container:before,
    .container:after {
      content: "";
      flex: 1;
    }
    
    .inner {
      border: 1px solid red;
      padding: 5px;
    } 
     <div class="container">
      <div class="inner">
        Foo content
      </div>
    </div> 

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

     .container {
      display: flex;
      flex-direction: column;
      border: 1px solid;
      min-height: 200px;
    }
    
    .container:before,
    .container:after {
      content: "";
      flex: 1;
    }
    
    .inner {
      border: 1px solid red;
      padding: 5px;
    } 
     <div class="container">
      <div class="inner">
        Foo content
      </div>
    </div> 

    ответ дан Temani Afif, с репутацией 53870, 19.12.2017
  • 1 рейтинг

    Это централизует ваш внутренний div горизонтально и вертикально:

     #outer{
        display: flex;
    }
    #inner{
        margin: auto;
    }
     

    Для горизонтального выравнивания, измените

     margin: 0 auto;
     

    и для вертикали, изменения

     margin: auto 0;
     
    ответ дан Shivam Chhetri, с репутацией 118, 15.03.2018
  • 1 рейтинг

    CSS

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

    HTML

     <div id="outer" style="width:100%">  
      <div id="inner">Foo foo</div>
    </div>
     
    ответ дан Abdul Ghaffar, с репутацией 164, 18.01.2017