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

Question

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

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

Answer 1

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

Answer 2

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

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

#inner {
  display: inline-block;
}

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

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

Answer 3

Лучшие подходы с 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 характеристики.

Гибкий:

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

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

• Ссылка 2

• Ссылка 3

• Ссылка 4

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

• Почему блочная модель W3C считается лучшей?

Answer 4

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

Answer 5

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

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

#outer {
  position: relative;
}

и...

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

Повозитесь с этим дальше Коден или на JSBin.

Answer 9

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

Answer 10

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

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

Answer 11

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

Answer 12

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

Answer 13

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

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

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

Answer 14

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

Answer 15

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

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

Вот скрипка показывая горизонтальное и вертикальное выравнивание.

Дополнительная информация находится на Сеть разработчиков Mozilla.

Answer 17

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

Answer 18

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

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

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

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

Answer 19

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

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>

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

Answer 20

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

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

Контейнер:

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

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

Answer 21

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

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 22

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

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

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

1. Сворачивать .inner внутри .center-helper
2. Делать .center-helper встроенный блок;он становится такого же размера, как .inner сделав его шириной 300 пикселей.
3. Толкать .center-helper 50% прав относительно своего родителя;это помещает его лево на 500 пикселей относительно.внешний.
4. Толкать .inner 50% осталось относительно родителя;это помещает его левое значение на -150 пикселей относительно.центральный помощник, что означает, что его левая сторона находится на расстоянии 500–150 = 350 пикселей относительно нее.внешний.
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%;
}

Answer 23

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

#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 характеристики;

Answer 24

Вот что вы хотите кратчайшим путем.

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 % );
}

Answer 25

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

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

• display: block
• display: inline
• display: inline-block

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

---

Флексбокс

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>

Answer 26

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

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

или вы можете посетить w3schools — гибкое свойство CSS для получения дополнительных идей.

Answer 27

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

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

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

Answer 28

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

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

Answer 29

Что ж, мне удалось найти решение, которое, возможно, подойдет для всех ситуаций, но использует 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);
  })
});

Answer 30

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

Все говорят, что нужно использовать:

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 */
}