如何垂直居中的内容与可变的高度在一个 div？

当内容的高度变化时，使 div 的内容垂直居中的最佳方法是什么。在我的特殊情况下，容器 div 的高度是固定的，但是如果有一个解决方案可以在容器具有可变高度的情况下工作，那就太好了。此外，我希望有一个解决方案，没有或很少使用 CSS 技巧和/或非语义标记。

alt text

167652 次浏览
小开

这是我多次需要做的事情，一个一致的解决方案仍然需要您添加一些非语义标记和一些特定于浏览器的技巧。当我们得到浏览器支持的 css3你会得到你的垂直中心没有罪过。

要更好地解释这项技术，您可以查看 我改编的那篇文章，但基本上它涉及到添加额外的元素，并在 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 和 transforms 两种方式来实现垂直居中(以及其他效果)。有关现代方法的更多信息，请参见 另一个问题，但请记住，浏览器对 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>

小开

使用子选择器，我获取了上面的 Fadi 不可思议的回答，并将其归结为一个可以应用的 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>

叉形码笔: 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%;
}

超文本标示语言

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


提交答案