CSS 如何在div内垂直居中具有可变高度的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/59309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically center content with variable height within a div?
提问by jessegavin
What is the best way to vertically center the content of a div when the height of the content is variable. In my particular case, the height of the container div is fixed, but it would be great if there were a solution that would work in cases where the container has a variable height as well. Also, I would love a solution with no, or very little use of CSS hacks and/or non-semantic markup.
当内容的高度可变时，垂直居中 div 内容的最佳方法是什么。在我的特殊情况下，容器 div 的高度是固定的，但是如果有一个解决方案可以在容器具有可变高度的情况下也能工作，那就太好了。另外，我希望有一个不使用或很少使用 CSS hacks 和/或非语义标记的解决方案。
采纳答案by BlackCetha
Just add
只需添加
position: relative;
top: 50%;
transform: translateY(-50%);
to the inner div.
到内部div。
What it does is moving the inner div's top border to the half height of the outer div (top: 50%;) and then the inner div up by half its height (transform: translateY(-50%)). This will work with position: absoluteor relative.
它所做的是将内部 div 的顶部边框移动到外部 div ( top: 50%;)的一半高度，然后将内部 div 向上移动其高度的一半 ( transform: translateY(-50%))。这将与position: absolute或 一起使用relative。
Keep in mind that transformand translatehave vendor prefixes which are not included for simplicity.
请记住，transform和translate有没有包括为简单起见，供应商前缀。
Codepen: http://codepen.io/anon/pen/ZYprdb
代码笔：http://codepen.io/anon/pen/ZYprdb
回答by Fadi
This seems to be the best solution I've found to this problem, as long as your browser supports the ::beforepseudo element: CSS-Tricks: Centering in the Unknown.
只要您的浏览器支持::before伪元素：CSS-Tricks: Centering in the Unknown，这似乎是我找到的最佳解决方案。
It doesn't require any extra markup and seems to work extremely well. I couldn't use the display: tablemethod because tableelements don't obey the max-heightproperty.
它不需要任何额外的标记，似乎工作得非常好。我无法使用该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>回答by Prestaul
This is something I have needed to do many times and a consistent solution still requires you add a little non-semantic markup and some browser specific hacks. When we get browser support for css 3 you'll get your vertical centering without sinning.
这是我需要做很多次的事情，一致的解决方案仍然需要您添加一些非语义标记和一些浏览器特定的技巧。当我们获得对 css 3 的浏览器支持时，您将获得垂直居中而不会出错。
For a better explanation of the technique you can look the article I adapted it from, but basically it involves adding an extra element and applying different styles in IE and browsers that support position:table\table-cellon non-table elements.
为了更好地解释该技术，您可以查看我改编自的文章，但基本上它涉及添加一个额外的元素并在支持position:table\table-cell非表格元素的IE 和浏览器中应用不同的样式。
<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>
There are many ways (hacks) to apply styles in specific sets of browsers. I used conditional comments but look at the article linked above to see two other techniques.
有很多方法（技巧）可以在特定的浏览器组中应用样式。我使用了条件注释，但请查看上面链接的文章以了解其他两种技术。
Note: There are simple ways to get vertical centering if you know some heights in advance, if you are trying to center a single line of text, or in several other cases. If you have more details then throw them in because there may be a method that doesn't require browser hacks or non-semantic markup.
注意：如果您事先知道一些高度，如果您试图将一行文本居中，或者在其他几种情况下，有一些简单的方法可以使垂直居中。如果您有更多详细信息，请将它们扔进去，因为可能有一种方法不需要浏览器黑客或非语义标记。
Update:We are beginning to get better browser support for CSS3, bringing both flex-box and transforms as alternative methods for getting vertical centering (among other effects). See this other questionfor more information about modern methods, but keep in mind that browser support is still sketchy for CSS3.
更新：我们开始为 CSS3 提供更好的浏览器支持，将 flex-box 和转换作为获取垂直居中（以及其他效果）的替代方法。有关现代方法的更多信息，请参阅另一个问题，但请记住，浏览器对 CSS3 的支持仍然很粗略。
回答by dougli
Using the child selector, I've taken Fadi's incredible answerabove and boiled it down to just one CSS rule that I can apply. Now all I have to do is add the contentCenteredclass name to elements I want to center:
使用子选择器，我采用了上面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>Forked CodePen: http://codepen.io/dougli/pen/Eeysg
分叉 CodePen：http://codepen.io/dougli/pen/Eeysg
回答by Leo Dimuccio
Best result for me so far:
到目前为止对我来说最好的结果：
div to be centered:
要居中的 div：
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;
回答by Lo?c G.
You can use margin auto. With flex, the div seems to be centered vertically too.
您可以使用自动保证金。使用 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>
回答by Leandro Castro
For me the best way to do this is:
对我来说，最好的方法是：
.container{
position: relative;
}
.element{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
The advantage is not having to make the height explicit
优点是不必明确高度
回答by hassan yousefi
you can use flex display such as below code:
您可以使用 flex 显示，例如以下代码：
.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>回答by user3432605
This is my awesome solution for a divwith a dynamic (percentaged) height.
对于div具有动态（百分比）高度的我来说，这是一个很棒的解决方案。
CSS
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
HTML
<div class="footer">
<div class="vertical_placer">
<div class="inner_placer">
<svg> some Text here</svg>
</div>
</div>
</div>
