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

Question

Как лучше всего центрировать содержимое div по вертикали, если высота содержимого является переменной.В моем конкретном случае высота контейнера div фиксирована, но было бы здорово, если бы существовало решение, которое работало бы и в тех случаях, когда контейнер также имеет переменную высоту.Кроме того, мне бы хотелось найти решение без или с очень небольшим использованием CSS-хаков и/или несемантической разметки.

Answer 1

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

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

Answer 2

Кажется, это лучшее решение этой проблемы, которое я нашел, если ваш браузер поддерживает ::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>

Answer 3

Это то, что мне приходилось делать много раз, и согласованное решение по-прежнему требует добавления небольшой несемантической разметки и некоторых хаков, специфичных для браузера.Когда мы получим поддержку 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, предлагая как flex-box, так и преобразования в качестве альтернативных методов вертикального центрирования (помимо других эффектов).Видеть это другой вопрос для получения дополнительной информации о современных методах, но имейте в виду, что поддержка CSS3 в браузерах все еще неудовлетворительна.

Answer 4

Используя дочерний селектор, я взял Невероятный ответ Фади выше, и свел его к одному правилу 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

Answer 5

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

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

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

Answer 6

Вы можете использовать маржу автоматически.При использовании 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>

Answer 7

Это мое потрясающее решение для 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>  

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