Каков наилучший способ вертикального центрирования содержимого div, когда высота содержимого является переменной. В моем конкретном случае высота контейнера div фиксирована, но было бы здорово, если бы было решение, которое будет работать в тех случаях, когда контейнер имеет переменную высоту. Кроме того, мне бы понравилось решение без использования CSS-хаков и/или не-семантической разметки или очень мало.
Просто добавьте
position: relative;
top: 50%;
transform: translateY(-50%);
во внутренний div.
То, что он делает, - это перемещение внутренней верхней границы div на половину высоты внешнего div (top: 50%;), а затем внутренний div вверх на половину высоты (transform: translateY(-50%)). Это будет работать с position: absolute или relative.
Имейте в виду, что transform и translate имеют префиксы поставщиков, которые не включены для простоты.
Codepen: http://codepen.io/anon/pen/ZYprdb
Похоже, это лучшее решение, которое я нашел для этой проблемы, если ваш браузер поддерживает псевдоэлемент ::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—"Did ye see anything looking like men going
towards that ship a while ago?"</p>
</div>
</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 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.
Используя дочерний селектор, я взял невероятный ответ фади выше и свел его к одному правилу 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—"Did ye see anything looking like men going
towards that ship a while ago?"</p>
</div>
</div>Лучший результат для меня до сих пор:
div для центровки:
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;
Вы можете использовать автоматическую маржу. С 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 с динамической (процентной) высотой.
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>
Для меня лучший способ сделать это:
.container{
position: relative;
}
.element{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Преимущество не в том, что нужно явно указывать высоту