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


4290

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

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

13
Из этих замечательных ответов я просто хочу подчеркнуть, что вы должны дать "#inner" значение "width", иначе оно будет равно "100%", и вы не сможете определить, находится ли оно уже по центру.
Джони

1
Joma Tech привел меня сюда
Барбу Барбу

@ Барбу Барбу: Каким образом? В каком контексте?
Питер Мортенсен

Ответы:


4727

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

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

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

Если вы ориентируетесь на Internet Explorer 8 (и более поздние версии), возможно, лучше иметь это вместо этого:

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


12
Для вертикального центрирования я обычно использую «line-height» (line-height == height). Это просто и приятно, но работает только с однострочным текстовым контентом :)
Николас Гийом

98
Вы должны использовать тег! DOCTYPE на своей HTML-странице, чтобы он хорошо работал в IE.
Фабио

15
Обратите внимание, что может быть необходимо добавить «float: none;» для #inner.
Мерт Мертс

15
Вы также устанавливаете верхнее и нижнее поля на 0, что не связано. Лучше выкладывать margin-left: auto; margin-right: autoя думаю.
Эммануэль Тузери

13
Не обязательно margin:0 auto: это может быть margin: <whatever_vertical_margin_you_need> autoвторой горизонтальный край.
YakovL

1247

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

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

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

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


13
@SabaAhang правильный синтаксис для этого будет float: none;и, вероятно, необходим только потому, что #inner унаследовал один floatиз leftили rightгде-то еще в вашем CSS.
Даг Маклин

8
Это хорошее решение. Просто имейте в виду , что внутренняя унаследует text-alignтак что вы можете захотеть установить внутренние - х text-alignдо initialили другое значение.
pmoleri

хорошее решение я так думаю
симон

381

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

Узнайте больше о центрировании дочерних элементов

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


25
Прежде чем приступить к реализации этого решения, обязательно прочитайте этот ответ .
cimmanon

4
Safari, на данный момент, все еще требует -webkitфлагов для flexbox ( display: -webkit-flex;и -webkit-align-items: center;и -webkit-justify-content: center;)
Джозеф Хансен

Я всегда думаю, что использование большого количества кода - плохая практика, например, с этим кодом я центрирую свой div: display: table; наценка: авто; простой и легкий
симон

Это я или этот фрагмент кода не центрирован
Майк

В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox
tonygatta

251

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

С помощью CSS calc () код может стать еще проще:


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Принцип все тот же; положите предмет посередине и компенсируйте ширину.


Мне не нравится это решение, потому что, когда внутренний элемент слишком широк для экрана, вы не можете прокрутить весь элемент по горизонтали. наценка: 0 авто работает лучше.
Aloso

поле слева: авто; поле справа: авто; центрирует элемент уровня блока
killscreen

Ширина по умолчанию для большинства элементов уровня блока - авто, которая заполняет доступную область на экране. Простое центрирование помещает его в то же положение, что и выравнивание по левому краю. Если вы хотите, чтобы он был визуально центрирован, вы должны установить ширину (или максимальную ширину, хотя Internet Explorer 6 и более ранние версии не поддерживают это, а IE 7 поддерживает его только в стандартном режиме).
killscreen

228

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

Код в основном это:

#outer {
  position: relative;
}

а также...

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

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


12
+1 за этот метод, я собирался ответить с ним. Обратите внимание, что вы должны объявить ширину элемента, который вы хотите центрировать по горизонтали (или высоту, если центрируете вертикально). Вот подробное объяснение: codepen.io/shshaw/full/gEiDt . Один из наиболее универсальных и широко поддерживаемых методов центрирования элементов по вертикали и / или по горизонтали.
stvnrynlds

6
Вы не можете использовать отступы внутри div, но если вы хотите создать иллюзию, используйте рамку того же цвета.
Белка

Я думаю, что для того, чтобы этот метод работал, вам нужно установить with и высоту внутреннего div
Nicolas S.Xu

212

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

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

Так что для полноты изложения здесь представлен новейший способ центрирования в CSS 3 с использованием модуля Flexible Box Layout .

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

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

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


что вы подразумеваете под "синтаксис устарел", это устарело?
Конга Раджу

6
Спецификация Flexbox прошла 3 основных пересмотра. Самый последний проект от сентября 2012 года, который официально устарел все предыдущие проекты. Тем не менее, поддержка браузеров не очень удобна (особенно старые браузеры Android): stackoverflow.com/questions/15662578/…
cimmanon

Это работало для меня в Chrome, когда версия Джастина Полия не сработала.
Верн Дженсен

Разве это не "justify-content: center;" для вертикального выравнивания и «align-items: center;» для горизонтального выравнивания?
Wouter Vanherck

3
@WouterVanherck это зависит от flex-directionзначения. Если это «строка» (по умолчанию) - тогда justify-content: center; для горизонтального выравнивания (как я упоминал в ответе) Если это «столбец» - тогда justify-content: center;для вертикального выравнивания.
Данилд

140

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

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

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

3
те же требования, что и для отображения: тоже встроенный блок ( quirksmode.org/css/display.html )
montrealmike

Я тоже этим пользовался, но никогда раньше не сталкивался display: table;. Что оно делает?
Мэтт Кременс

97

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


89

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


49
а если ты не знаешь ширину? Скажите, потому что контент динамический?
Человек

Максимальная ширина? что об этом?

1
Я использую width: fit-content;и margin: 0 auto. Я думаю, что это может работать с неизвестной шириной.
Рик


88

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


62

Недавно мне пришлось display:none;центрировать «скрытый» div (то есть ), который имел внутри себя табличную форму, которую нужно было центрировать на странице. Я написал следующий код 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>


59

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

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

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


Это может не сработать, если у вас есть другие div ниже центрированного div.
NoChance

54

Для 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 для поддержки устаревших браузеров.


5
Нет необходимости для свойства text-align. Это совершенно не нужно.
Тоухид Рахман

text-align на самом деле необходимо, чтобы он работал в режиме IE quicks, поэтому, если вы не возражаете, добавьте небольшое выражение для поддержки старых браузеров, оставьте его там. (IE8 с правилами IE8 и IE7 работают без выравнивания текста, так что, возможно, это касается только IE6 и старше)
heytools


47

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

Более подробная информация о Mozilla Developer Network .


2
Также могут понадобиться префиксы поставщиков:-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);
Skippy le Grand Gourou

45

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

39

Я недавно нашел подход:

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

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

Оба элемента должны иметь одинаковую ширину для правильного функционирования.


Просто установите это правило для #innerтолько: #inner { position:relative; left:50%; transform:translateX(-50%); }. Это работает для любой ширины.
Хосе Руи Сантос

33

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

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>

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


28

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

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

Контейнер:

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

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


27

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

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


1
Как отмечает ваша скрипка, на #inner должна быть установлена ​​ширина.
Майкл Терри

#outerне нужно, так width:100%;как <div>по умолчанию всегда есть width:100%. и text-align:centerтакже не является необходимым вообще.
Мобарак Али

27

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

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

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

  1. Завернуть .innerвнутрь.center-helper
  2. Сделать .center-helperвстроенный блок; он становится того же размера, .innerчто и его ширина 300 пикселей.
  3. Нажмите на .center-helper50% вправо относительно своего родителя; это оставляет его слева на 500 пикселей по отношению к. наружный.
  4. Нажмите на .inner50% влево относительно своего родителя; это помещает его слева в -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>


26

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

#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свойства;


25

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

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

3
Это центрирует это вертикально.
Майкл Терри

22

Выровнять текст: по центру

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


Маржа: 0 авто

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


Flexbox

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

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


преобразование

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


<center> (Осуждаемый)

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


22

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

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

или вы можете посетить w3schools - CSS flex Property, чтобы получить больше идей.


21

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

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

21

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

21

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

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

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


19

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

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

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

text-align работает для выравнивания текста в его контейнере, а не для его контейнера с его родителем.
Лалит Кумар Маурья

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

выравнивание текста только по центру. Вы правы в данный момент, но когда вы пишете контейнер CSS, который содержит дочерний элемент с разной шириной и цветом, ваш код не работает. Проверьте это снова !!!!
Лалит Кумар Маурья

Посмотрите этот пример jsfiddle.net/uCdPK/2 и скажите мне, что вы об этом думаете !!!!!
Лалит Кумар Маурья
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.