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

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
22.09.2008 12:27:57
Из этих замечательных ответов я просто хочу подчеркнуть, что вы должны дать "#inner" значение "width", иначе оно будет равно "100%", и вы не сможете определить, находится ли оно уже по центру.
Jony 7.11.2017 08:22:14
Joma Tech привел меня сюда
Barbu Barbu 1.04.2020 18:56:51
30 ОТВЕТОВ
РЕШЕНИЕ

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

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

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

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

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

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

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

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

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

4691
6.06.2019 18:45:25
Для вертикального центрирования я обычно использую «line-height» (line-height == height). Это просто и приятно, но работает только с однострочным текстовым контентом :)
Nicolas Guillaume 23.06.2010 12:36:47
Вы должны использовать тег! DOCTYPE на своей HTML-странице, чтобы он хорошо работал в IE.
Fabio 28.01.2012 14:23:14
Обратите внимание, что может быть необходимо добавить «float: none;» для #inner.
Mert Mertce 27.09.2013 08:30:50
Вы также устанавливаете верхнее и нижнее поля на 0, что не связано. Лучше выкладывать margin-left: auto; margin-right: autoя думаю.
Emmanuel Touzery 8.02.2014 22:45:47
Не обязательно margin:0 auto: это может быть margin: <whatever_vertical_margin_you_need> autoвторой горизонтальный край.
YakovL 3.05.2016 19:07:32

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

88
22.10.2019 06:03:02
а если ты не знаешь ширину? Скажите, потому что контент динамический?
gman 2.06.2011 15:45:28
Максимальная ширина? что об этом?
Will Hoskings 17.03.2018 22:32:19
Я использую width: fit-content;и margin: 0 auto. Я думаю, что это может работать с неизвестной шириной.
Rick 15.10.2019 04:15:50

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

88
17.03.2018 19:11:15

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

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

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

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

1233
22.11.2017 11:34:02
@SabaAhang правильный синтаксис для этого будет float: none;и, вероятно, необходим только потому, что #inner унаследовал один floatиз leftили rightгде-то еще в вашем CSS.
Doug McLean 12.11.2015 09:21:37
Это хорошее решение. Просто имейте в виду , что внутренняя унаследует text-alignтак что вы можете захотеть установить внутренние - х text-alignдо initialили другое значение.
pmoleri 18.11.2016 21:52:45
Хорошее решение, я так думаю
simon 4.11.2019 18:10:06

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

62
22.10.2019 06:04:12

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

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

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

248
25.11.2019 15:41:19
Мне не нравится это решение, потому что, когда внутренний элемент слишком широк для экрана, вы не можете прокрутить весь элемент по горизонтали. наценка: 0 авто работает лучше.
Aloso 30.12.2015 04:02:09
поле слева: авто; поле справа: авто; центрирует элемент уровня блока
killscreen 10.11.2017 19:15:55
Ширина по умолчанию для большинства элементов уровня блока - авто, которая заполняет доступную область на экране. Простое центрирование помещает его в то же положение, что и выравнивание по левому краю. Если вы хотите, чтобы он был визуально центрирован, вы должны установить ширину (или максимальную ширину, хотя Internet Explorer 6 и более ранние версии не поддерживают это, а IE 7 поддерживает его только в стандартном режиме).
killscreen 10.11.2017 19:16:10

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

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
89
29.10.2013 17:23:48
Прежде чем приступить к реализации этого решения, обязательно прочитайте этот ответ .
cimmanon 24.04.2013 18:52:25

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

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

#element {
    display: table;
    margin: 0 auto;
}
138
29.10.2013 17:23:42
те же требования, что и для отображения: тоже встроенный блок ( quirksmode.org/css/display.html )
montrealmike 11.09.2012 15:09:05
Я тоже этим пользовался, но никогда раньше не сталкивался display: table;. Что оно делает?
Matt Cremeens 31.07.2017 11:25:46

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

54
17.03.2018 19:13:38
Нет необходимости для свойства text-align. Это совершенно не нужно.
Touhid Rahman 23.05.2013 05:29:18
text-align на самом деле необходимо, чтобы он работал в режиме IE quicks, поэтому, если вы не возражаете, добавьте небольшое выражение для поддержки старых браузеров, оставьте его там. (IE8 с правилами IE8 и IE7 работают без выравнивания текста, так что, возможно, это касается только IE6 и старше)
heytools 4.11.2017 02:02:51

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

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

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

378
15.05.2019 13:38:09
Прежде чем приступить к реализации этого решения, обязательно прочитайте этот ответ .
cimmanon 24.04.2013 18:51:58
Safari, на данный момент, все еще требует -webkitфлагов для flexbox ( display: -webkit-flex;и -webkit-align-items: center;и -webkit-justify-content: center;)
Joseph Hansen 23.07.2015 15:59:08
Я всегда думаю, что использование большого количества кода - плохая практика, например, с этим кодом я центрирую свой div: display: table; наценка: авто; простой и легкий
simon 4.11.2019 18:11:22
Это я или фрагмент кода не центрирован
Mike 13.01.2020 15:31:50
В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox
tonygatta 31.01.2020 11:08:51

Центрирование: Авто-ширина поля

Это поле отцентрировано по горизонтали, установив для его ширины правого и левого полей значение «auto». Это предпочтительный способ выполнения горизонтального центрирования с помощью CSS, который очень хорошо работает в большинстве браузеров с поддержкой CSS 2. К сожалению, Internet Explorer 5 / Windows не отвечает на этот метод - недостаток этого браузера, а не методика.

Есть простой обходной путь. (Пауза, пока вы боретесь с тошнотой, вызванной этим словом.) Готов? Internet Explorer 5 / Windows неправильно применяет атрибут CSS «text-align» к элементам уровня блока. Объявление «text-align: center» для содержащего элемента уровня блока (часто элемента BODY) горизонтально центрирует прямоугольник в Internet Explorer 5 / Windows.

У этого обходного пути есть побочный эффект: атрибут CSS «text-align» наследуется, центрируя встроенный контент. Часто необходимо явно установить атрибут «выравнивание текста» для центрированного поля, чтобы противостоять эффектам обходного пути Internet Explorer 5 / Windows. Соответствующий CSS следует.

body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
}

#Content {
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #EEE;
}

http://bluerobot.com/web/css/center1.html

-9
17.03.2018 20:10:52
Это не центрирует div, это центрирует текст.
clickbait 12.06.2015 23:50:25

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

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

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

59
31.05.2016 13:19:25
Это может не сработать, если у вас есть другие div ниже центрированного div.
NoChance 26.07.2018 07:59:28

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

209
17.03.2018 20:14:23
что вы подразумеваете под "синтаксис устарел", это устарело?
Konga Raju 6.09.2013 10:18:39
Спецификация Flexbox прошла 3 основных пересмотра. Самый последний проект от сентября 2012 года, который официально устарел все предыдущие проекты. Тем не менее, поддержка браузеров не очень удобна (особенно старые браузеры Android): stackoverflow.com/questions/15662578/…
cimmanon 1.10.2013 20:33:33
Это работало для меня в Chrome, когда версия Джастина Полия не сработала.
Vern Jensen 29.06.2016 02:50:17
Разве это не «justify-content: center»; для вертикального выравнивания и «align-items: center;» для горизонтального выравнивания?
Wouter Vanherck 22.03.2017 12:04:47
@WouterVanherck это зависит от flex-directionзначения. Если это «строка» (по умолчанию) - тогда justify-content: center; для горизонтального выравнивания (как я упоминал в ответе) Если это «столбец» - тогда justify-content: center;для вертикального выравнивания.
Danield 22.03.2017 12:29:34

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

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

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

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

39
19.07.2013 14:16:43
Просто установите это правило для #innerтолько: #inner { position:relative; left:50%; transform:translateX(-50%); }. Это работает для любой ширины.
Jose Rui Santos 24.11.2015 10:30:28

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

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
8
6.06.2013 05:30:29

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

#outerDiv {
  width: 500px;
}

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

51
24.02.2017 08:37:33

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

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

#outer {
  position: relative;
}

а также...

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

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

227
18.08.2017 10:35:29
+1 за этот метод, я собирался ответить с ним. Обратите внимание, что вы должны объявить ширину элемента, который вы хотите центрировать по горизонтали (или высоту, если центрируете по вертикали). Вот подробное объяснение: codepen.io/shshaw/full/gEiDt . Один из наиболее универсальных и широко поддерживаемых методов центрирования элементов по вертикали и / или по горизонтали.
stvnrynlds 16.12.2013 18:27:12
Вы не можете использовать отступы внутри div, но если вы хотите создать иллюзию, используйте рамку того же цвета.
Squirrl 9.07.2014 11:45:32
Я думаю, что для того, чтобы этот метод работал, вам нужно установить with и высоту внутреннего div
Nicolas S.Xu 29.11.2015 21:39:00

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

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

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

6
16.10.2013 17:09:05

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

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

26
16.10.2013 17:08:20

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

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

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

Смотрите пример здесь .

7
27.06.2017 11:40:41

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

margin: 0 auto;

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

text-align: center;
18
5.11.2013 15:21:21
text-align работает для выравнивания текста в его контейнере, а не для его контейнера с его родителем.
Lalit Kumar Maurya 4.12.2013 07:33: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 */
}
19
17.03.2018 18:38:49
text-align работает для выравнивания текста в его контейнере, а не для его контейнера с его родителем.
Lalit Kumar Maurya 4.12.2013 07:32:36
я проверяю это, у меня проблема с установкой дочернего по центру, должна, когда у вас есть более одного дочернего элемента, больше раз поля: 0 автоматический шрифт ответа, но, выравнивание текста по центру, для родителя сделать этот дочерний элемент центром, даже если они являются элементом и не будь текстом,
Pnsadeghy 4.12.2013 08:35:28
выравнивание текста только по центру. Вы правы в данный момент, но когда вы пишете контейнер CSS, который содержит дочерний элемент с разной шириной и цветом, ваш код не работает. Проверьте это снова !!!!
Lalit Kumar Maurya 4.12.2013 09:23:49
Посмотрите этот пример jsfiddle.net/uCdPK/2 и скажите мне, что вы об этом думаете !!!!!
Lalit Kumar Maurya 4.12.2013 10:03:06
<center>

Я избалован самым простым из известных центров?

</center>
-4
2.12.2013 22:48:36
Это сработало для меня, и я не уверен, почему это не ответ. Может кто-нибудь объяснить, что с этим не так?
DaveWalley 20.01.2014 04:26:36
@DaveWalley, хотя работает, есть 2 веские причины, почему это не очень хороший ответ. Во-первых, вопрос был для решения CSS, и это чисто решение HTML. 2-й тег CENTER в HTML 4 уже устарел
Idra 26.01.2014 13:42:51

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

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>

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

33
17.03.2018 18:44:36

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

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

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

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

27
22.10.2019 16:35:01

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

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 % );
}
25
9.11.2015 03:35:03
Это центрирует это вертикально.
Michael Terry 6.02.2015 00:24:56

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

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

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
1
8.03.2014 19:19:59
Да, я считаю, что это дубликат. Лучший ответ Джастина Полея решил проблему таким же образом.
Gui Imamura 2.04.2014 02:00:10

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

95
17.03.2018 18:49:52