如何垂直居中在一个div内的可变高度的内容？
当内容的高度可变时，垂直居中div的内容的最佳方法是什么？ 在我的具体情况下，容器div的高度是固定的，但如果在容器高度可变的情况下有解决scheme，那将是非常好的。 此外，我会喜欢一个没有，或很less使用CSS黑客和/或非语义标记的解决scheme。
只需添加
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
这似乎是我发现这个问题的最好的解决scheme，只要你的浏览器支持:before伪元素: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>
这是我需要做很多次的事情，一个一致的解决scheme仍然需要添加一些非语义标记和一些浏览器特定的黑客。 当我们获得对css 3的浏览器支持时，您将获得垂直的中心而不会犯罪。
为了更好的解释这个技术，你可以看看我适应它的文章 ，但基本上它包括添加一个额外的元素，并在IE和支持position:table\table-cell浏览器中应用不同的样式position:table\table-cell非表格元素上的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的支持仍然是粗略的。
使用孩子select器，我已经采取了上面的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—"Did ye see anything looking like men going towards that ship a while ago?"</p> </div> </div>
你可以使用margin auto。 用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;
这是一个dynamic（百分比）高度的div真棒解决scheme。
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>
亲自尝试一下。
