Html 如何垂直对齐到具有定义宽度/高度的 div 内容的中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10968726/
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 align into the center of the content of a div with defined width/height?
提问by Ricardo Rodrigues
What would be the correct method to vertically center any content in a defined width/height div.
在定义的 width/height 中垂直居中任何内容的正确方法是什么div。
In the examplethere are two contents with different heights, what is the best way to center vertically both using the class .content. (and it works for every browser and without the solution of table-cell)
在示例中有两个具有不同高度的内容，使用 class 垂直居中的最佳方法是什么.content。（它适用于每个浏览器，没有解决方案table-cell）
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0;and margin auto.
有一些解决方案，但想知道其他想法，一个是使用position:absolute; top:0; bottom: 0;和margin auto。
回答by Josh Mein
I have researched this a little and from what I have found you have four options:
我对此进行了一些研究，根据我发现的情况，您有四种选择：
Version 1: Parent div with display as table-cell
版本 1：父 div 显示为表格单元格
If you do not mind using the display:table-cellon your parent div, you can use of the following options:
如果您不介意display:table-cell在父 div 上使用 ，则可以使用以下选项：
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}?
Version 2: Parent div with display block and content display table-cell
版本 2：带有显示块和内容显示 table-cell 的父 div
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}?
Version 3: Parent div floating and content div as display table-cell
版本 3：父 div 浮动和内容 div 作为显示表格单元格
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}?
Version 4: Parent div position relative with content position absolute
版本 4：父 div 位置相对于内容位置绝对
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
我在这个版本中遇到的唯一问题是，您似乎必须为每个特定实现创建 css。这样做的原因是内容 div 需要设置文本将填充的高度，并且边距顶部将被计算出来。这个问题可以在演示中看到。您可以通过更改内容 div 的高度百分比并将其乘以 -.5 来获得边距最高值，从而手动使其适用于每个场景。
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}?
回答by martin36
回答by N Kumar
I found this solution in this article
我在这篇文章中找到了这个解决方案
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
如果元素的高度不固定，它就像一个魅力。
回答by lokesh
margin: all_four_margin
保证金：all_four_margin
by providing 50% to all_four_margin will place the element at the center
通过为 all_four_margin 提供 50% 将元素置于中心
style="margin: 50%"
style="margin: 50%"
you can apply it for following too
您也可以将其应用于以下
margin: top right bottom left
边距：右上左下
margin: top right&left bottom
边距：右上角和左下角
margin: top&bottom right&left
边距：上下左右
by giving appropriate % we get the element wherever we want.
通过提供适当的 % 我们可以在任何我们想要的地方获得元素。
