Html 在其父 div 中垂直居中多个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9623317/
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
Vertically centering multiple div's in its parent div
提问by jay
I have a set of elements inside a parent element. The parent element's height can change (it will be changed by some jQuery files). Here is how the layout looks:
我在父元素中有一组元素。父元素的高度可以改变（它会被一些 jQuery 文件改变）。这是布局的外观：
<div class = "parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
I want the child elements to end up aligned at the middle of the parent div, but i can't figure out how to write the css to do so. I have tried writing things like:
我希望子元素最终在父 div 的中间对齐，但我不知道如何编写 css 来做到这一点。我试过写这样的东西：
.child1 {
...
vertical-align: middle;
}
Which doesn't work. I have also tried:
哪个不起作用。我也试过：
.parent {
display:table;
}
.child1 {
display:table-cell;
vertical-align:middle;
}
This also doesn't work. Any ideas how to do this?
这也行不通。任何想法如何做到这一点？
采纳答案by Arsh Singh
Check this link : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
检查此链接：http: //www.jakpsatweb.cz/css/css-vertical-center-solution.html
this will bring your child div's top to 50% of the container. just add margin-top: -(x)px; where (x) is half of your child div's height.
这将使您的孩子 div 的顶部达到容器的 50%。只需添加 margin-top: -(x)px; 其中 (x) 是您孩子 div 高度的一半。
回答by Andres Ilich
You can create a wrapper for the elements you wish to center inside a container that gets centered instead like so:
您可以为要在居中的容器内居中的元素创建一个包装器，如下所示：
HTML
HTML
<div class ="parent">
<div class="centerme">
<div class="child1">
....
</div>
<div class="child2">
....
</div>
</div>
</div>
Then you can simply do this:
然后你可以简单地这样做：
CSS
CSS
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Demo. Method found over at CSS-tricks.
演示。在CSS-tricks找到的方法。
回答by t0nyh0
This is slightly more complicated than your standard "how do I vertically align a single div inside a parent container."
这比您的标准“如何垂直对齐父容器内的单个 div”稍微复杂一些。
If you have a multiple number (which can change) of child elements that need to be aligned vertically or if your parent container's height changes, then you will need to use Javsacript/JQuery to set the position as there is no "standard" way to apply a middle vertical alignment to multiple child elements inside a parent container utilizing just CSS. EDIT: I've been proven wrong, you can apparently with using :before pseudo-element, but it won't work in IE7 unless you hack around it.
如果您有多个（可以更改）需要垂直对齐的子元素，或者如果您的父容器的高度发生变化，那么您将需要使用 Javsacript/JQuery 来设置位置，因为没有“标准”方式仅使用 CSS 将中间垂直对齐应用于父容器内的多个子元素。 编辑：我已经被证明是错误的，你显然可以使用 :before 伪元素，但它不会在 IE7 中工作，除非你绕过它。
I've implemented this in a fiddle: http://jsfiddle.net/rJJah/20/
我已经在小提琴中实现了这个：http: //jsfiddle.net/rJJah/20/
Key parts
关键部件
- Each Child element has a
position:relative. This is important because certain child elements may have variable height, and this eliminates the need to calculate the top position separately for each. - Everytime you change the height of the parent container, you will need to rerun the height calculations and setting the top offset to each child.
- 每个子元素都有一个
position:relative. 这很重要，因为某些子元素可能具有可变的高度，这样就无需为每个子元素分别计算顶部位置。 - 每次更改父容器的高度时，都需要重新运行高度计算并为每个子容器设置顶部偏移量。
回答by Robert Kajic
You have forgotten to apply the same styling on child2 as on child1, like so:
您忘记在 child2 上应用与 child1 上相同的样式，如下所示：
.child1, .child2 {
display:table-cell;
vertical-align:middle;
}
Here is a jsfiddle: http://jsfiddle.net/D853q/1/
这是一个 jsfiddle：http: //jsfiddle.net/D853q/1/
