Html 如何在流体布局中垂直居中父 div 内的子 div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17996425/
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 of child divs inside parent div in a fluid layout
提问by MLister
I have a div which contains two child divs, and they are intended to be part of fluid layout, so I can't set a fixed size for them in px.
我有一个包含两个子 div 的 div，它们旨在成为流体布局的一部分，因此我无法在 px 中为它们设置固定大小。
There are two goals here:
这里有两个目标：
Align the two child divs horizontally, which I have achieved using
float: leftandfloat: rightrespectively.Vertically center the text (within the child divs) relative to the parent div. The text is short and takes a single line by design.
水平对齐两个子 div，这是我分别使用
float: left和实现的float: right。相对于父 div 垂直居中文本（在子 div 内）。文本很短，设计上只占一行。
What I have now: http://jsfiddle.net/yX3p9/
我现在所拥有的：http: //jsfiddle.net/yX3p9/
Apparently, the two child divs do not take the full height of the parent div, and therefore their text are not vertically centered relative to the parent div.
显然，两个子 div 没有占据父 div 的全部高度，因此它们的文本没有相对于父 div 垂直居中。
Conceptually, to achieve the goals above, we can either make the child divs vertically centered within the parent div, or we can make the child divs take the full height of the parent div. What is the robust way to do so?
从概念上讲，为了实现上述目标，我们可以让子 div 在父 div 内垂直居中，也可以让子 div 占据父 div 的全部高度。这样做的稳健方法是什么？
*Browser support: IE 9+ and other usual modern browsers.
*浏览器支持：IE 9+ 和其他常用的现代浏览器。
采纳答案by Ferdinand Torggler
I updated your fiddle: http://jsfiddle.net/yX3p9/7/
我更新了你的小提琴：http: //jsfiddle.net/yX3p9/7/
I used display: table-cell;in order to use vertical-align: middle;
我用display: table-cell;为了使用vertical-align: middle;
回答by Bart Burg
I prefer the usage of transform above the above answers.
我更喜欢使用上述答案上面的转换。
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
In my experience it works in many situations and on all major browsers (even IE9+).
根据我的经验，它适用于许多情况和所有主要浏览器（甚至 IE9+）。
If you use SCSS, you might even like to implement this mixin:
如果你使用 SCSS，你甚至可能想要实现这个 mixin：
@mixin v-align($position: absolute){
position: $position; top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%); /* IE */
-moz-transform:translateY(-50%); /* Firefox */
-webkit-transform:translateY(-50%); /* Safari and Chrome */
-o-transform:translateY(-50%);
}
回答by DanMan
Use line-height. If it's just one line of text, a high line-height will effectively position the text in the middle of the line.
使用line-height. 如果它只是一行文本，高行高将有效地将文本定位在该行的中间。
Or try display:table-cellin combination with vertical-align.
或者尝试display:table-cell结合vertical-align.
回答by Marc Audet
In addition to using CSS tables, you can also use absolute positioning to get a similar layout.
除了使用 CSS 表格，您还可以使用绝对定位来获得类似的布局。
Using your HTML as is (no extra elements), apply the following CSS:
按原样使用 HTML（无额外元素），应用以下 CSS：
html, body {
height: 100%;
width: 100%;
font-size: 13px;
}
.parent {
background-color: grey;
height: 20%;
line-height: 1.6em;
font-size: 1.6em;
min-height: 1.6em;
position: relative;
}
.left, .right {
position: absolute;
top: 50%;
margin-top: -0.8em;
}
.left {
background-color: yellow;
padding-left: 20px;
left: 0;
}
.right {
background-color: red;
padding-right: 20px;
right: 0;
}
You can see the demo fiddle at: http://jsfiddle.net/audetwebdesign/cByHa/
您可以在以下位置查看演示小提琴：http: //jsfiddle.net/audetwebdesign/cByHa/
In the .parentcontainer, set the line-height to an explicit value (1.6em as the font size), position: relativeand min-heightto maintain enough height for the text.
在.parent容器中，将 line-height 设置为一个明确的值（字体大小为 1.6em），position: relative并min-height为文本保持足够的高度。
The two child elements .leftand .rightare positioned absolutely with top: 50%and use margin-top: -0.8emto get vertical centering (use one-half of line-height value).
两个子元素.left和.right绝对定位top: 50%，用于margin-top: -0.8em获得垂直居中（使用行高值的二分之一）。
Use the left and right offsets (or padding) to adjust the child elements horizontal position as needed.
使用左右偏移（或填充）根据需要调整子元素的水平位置。
回答by QArea
html, body {
height: 100%;
width: 100%;
font-size: 13px;
}
.parent {
height: 50px;
background-color: grey;
font-size: 1.6em;
}
.left {
margin-left: 2%;
float: left;
background-color: yellow;
height:100%;
}
.right {
margin-right: 2%;
float: right;
background-color: red;
height:100%;
}
.parent span{
display:table;
height:100%;
}
.parent em{
display:table-cell;
vertical-align:middle;
}
回答by Vikas P
Make Height and Width as 100% in child element. This was the child will occupy entire space of parent and vertical-align:middleproperty will work. I used it in a case when parent was a <div>and child was a <table>. Table was marked to take height and width as 100%.
将子元素中的高度和宽度设为 100%。这是孩子将占据父母的整个空间，vertical-align:middle财产将起作用。我在父母是 a<div>而孩子是<table>. 表格被标记为高度和宽度为 100%。
