Как вертикально центрировать контент с переменной высотой в div?

Это то, что мне приходилось делать много раз, и последовательное решение по-прежнему требует, чтобы вы добавили небольшую несемантическую разметку и некоторые хаки, специфичные для браузера. Когда мы получим поддержку css 3 в браузере, вы без труда получите вертикальное центрирование.

Для лучшего объяснения метода вы можете посмотреть статья, которую я адаптировал из, но в основном он включает добавление дополнительного элемента и применение различных стилей в IE и браузерах, поддерживающих position:table\table-cell, для элементов, не являющихся таблицами.

<div class = "valign-outer">
    <div class = "valign-middle">
        <div class = "valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

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

Примечание. Есть простые способы получить вертикальное центрирование, если вы заранее знаете некоторые высоты, если вы пытаетесь центрировать одну строку текста или в нескольких других случаях. Если у вас есть дополнительные сведения, добавьте их, потому что может быть метод, который не требует взлома браузера или несемантической разметки.

Обновлять: Мы начинаем улучшать поддержку CSS3 браузерами, предлагая гибкий блок и преобразования в качестве альтернативных методов для получения вертикального центрирования (среди других эффектов). См. этот другой вопрос для получения дополнительной информации о современных методах, но имейте в виду, что поддержка CSS3 браузерами по-прежнему отрывочна.

Похоже, это лучшее решение, которое я нашел для этой проблемы, если ваш браузер поддерживает псевдоэлемент ::before: CSS-уловки: центрирование в неизвестном.

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

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class = "block">
    <div class = "centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Используя дочерний селектор, я взял Невероятный ответ Фади выше и свел его к одному правилу CSS, которое я могу применить. Теперь все, что мне нужно сделать, это добавить имя класса contentCentered к элементам, которые я хочу центрировать:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class = "contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

Разветвленный CodePen: http://codepen.io/dougli/pen/Eeysg

Это отличное решение для div с динамической (процентной) высотой.

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class = "footer">
    <div class = "vertical_placer">
        <div class = "inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Попробуйте сами.

Просто добавь

position: relative;
top: 50%;
transform: translateY(-50%);

во внутренний div.

Он перемещает верхнюю границу внутреннего div на половину высоты внешнего div (top: 50%;), а затем внутренний div вверх на половину его высоты (transform: translateY(-50%)). Это будет работать с position: absolute или relative.

Имейте в виду, что transform и translate имеют префиксы поставщиков, которые не включены для простоты.

Кодовое отверстие: http://codepen.io/anon/pen/ZYprdb

Вы можете использовать маржу автоматически. При использовании flex кажется, что div тоже центрирован по вертикали.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class = "site">
  <div class = "box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Лучший результат для меня на данный момент:

div для центрирования:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Для меня лучший способ сделать это:

.container{
  position: relative;
}

.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Преимущество заключается в том, что высота не указывается явно.

вы можете использовать гибкий дисплей, например, код ниже:

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class = "example">
    <h6>Some text</h6>
</div>