如何垂直居中在一个div内的可变高度的内容？
当内容的高度可变时，垂直居中div的内容的最佳方法是什么？ 在我的具体情况中，容器div的高度是固定的，但如果有一种解决方案在容器高度可变的情况下也能工作，那将是非常好的。 另外，我会喜欢没有或很少使用CSS hacks和/或非语义标记的解决方案。
只需添加
position: relative;
top: 50%;
transform: translateY(-50%);
到内部分区。
它的作用是将内部div的顶部边框移动到外部div的一半高度（ top: 50%; ），然后将内部div上移一半高度（ transform: translateY(-50%) ）。 这将与position: absolute或relative 。
请记住， transform和translate有供应商前缀，为简单起见，这些前缀不包括在内。
Codepen：http://codepen.io/anon/pen/ZYprdb
这似乎是我发现这个问题的最佳解决方案，只要您的浏览器支持::before伪元素：CSS-Tricks：以未知为中心。
它不需要任何额外的标记，似乎工作得非常好。 我无法使用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:tabletable-cell浏览器中应用不同的样式position:tabletable-cell非表格元素上的position:tabletable-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的支持仍然很粗略。
链接地址: http://www.djcxy.com/p/7143.html上一篇: How to vertically center content with variable height within a div?