Html 如何在绝对定位的父 div 内垂直居中 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28455100/
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 center div vertically inside of absolutely positioned parent div
提问by Vladimirs
I am trying to get blue container in the middle of pink one, however seems vertical-align: middle;doesn't do the job in that case.
我正在尝试将蓝色容器放在粉红色容器的中间，但vertical-align: middle;在这种情况下似乎不起作用。
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
Result:
结果：
Expectation:
期待：
Please suggest how can I achieve that.
请建议我如何实现这一目标。
回答by Hashem Qolami
First of all note that vertical-alignis only applicable to table cells and inline-level elements.
首先请注意，这vertical-align仅适用于表格单元格和内联级元素。
There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you twomethodsfrom my favorites:
有几种方法可以实现垂直对齐，它们可能满足也可能不满足您的需求。但是，我将向您展示我最喜欢的两种方法：
1. Using transformand top
1. 使用transform和top
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>The key point is that a percentage value on topis relative to the heightof the containing block; While a percentage value on transforms is relative to the size of the box itself (the bounding box).
关键是百分比值 ontop是相对于height包含块的; 而transforms上的百分比值与框本身（边界框）的大小有关。
If you experience font rendering issues(blurry font), the fix is to add perspective(1px)to the transformdeclaration so it becomes:
如果您遇到字体渲染问题（字体模糊），修复方法是添加perspective(1px)到transform声明中，使其变为：
transform: perspective(1px) translateY(-50%);
It's worth noting that CSS transformis supported in IE9+.
值得注意的transform是，IE9+ 支持CSS 。
2. Using inline-block(pseudo-)elements
2. 使用inline-block（伪）元素
In this method, we have two sibling inline-blockelements which are aligned vertically at the middle by vertical-align: middledeclaration.
在这个方法中，我们有两个兄弟inline-block元素，它们通过vertical-align: middle声明在中间垂直对齐。
One of them has a heightof 100%of its parent and the other is our desired element whose we wanted to align it at the middle.
其中一人拥有height的100%其父的，另一种是我们所期望的元素，它的我们想在中间对齐。
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>Finally, we should use one of the available methods to remove the gap between inline-level elements.
最后，我们应该使用一种可用的方法来消除内联级元素之间的间隙。
回答by ?i?n Tr??ng
use this :
用这个 ：
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
refer this link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
请参阅此链接：https: //www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
回答by Chris Aelbrecht
Use flex blox in your absoutely positioned div to center its content.
在绝对定位的 div 中使用 flex blox 使其内容居中。
See example https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
参见示例https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
.some-absolute-div {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
回答by Juan Angel
Center vertically and horizontally:
垂直和水平居中：
.parent{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.c{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
回答by G-Cyrillus
You may use display:table/table-cell;
您可以使用display:table/table-cell;
.a{
position: absolute;
left: 50px;
top: 50px;
display:table;
}
.b{
text-align: left;
display:table-cell;
height: 56px;
vertical-align: middle;
background-color: pink;
}
.c {
background-color: lightblue;
}<div class="a">
<div class="b">
<div class="c" >test</div>
</div>
</div>回答by Hicham
An additional simple solution
一个额外的简单解决方案
HTML:
HTML：
<div id="d1">
<div id="d2">
Text
</div>
</div>
CSS:
CSS：
#d1{
position:absolute;
top:100px;left:100px;
}
#d2{
border:1px solid black;
height:50px; width:50px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
回答by Sainul Abid
Here is simple way using Top object.
这是使用 Top 对象的简单方法。
eg: If absolute element size is 60px.
例如：如果绝对元素大小为 60px。
.absolute-element {
position:absolute;
height:60px;
top: calc(50% - 60px);
}
回答by Arindam Sarkar
You can do it by using display:table;in parent div and display: table-cell; vertical-align: middle;in child div
您可以display:table;在父 div 和display: table-cell; vertical-align: middle;子 div 中使用
<div style="display:table;">
<div style="text-align: left; height: 56px; background-color: pink; display: table-cell; vertical-align: middle;">
<div style="background-color: lightblue; ">test</div>
</div>
</div>回答by Whanau Paitai
Please check this answer to a similar issue.
请检查这个类似问题的答案。
This is by far the easiest way I have found.
这是迄今为止我找到的最简单的方法。
https://stackoverflow.com/a/26079837/4593442
https://stackoverflow.com/a/26079837/4593442
NOTE. I used display: -webkit-flex;instead of display: flex;for testing inside safari.
笔记。我使用了显示：-webkit-flex; 而不是显示：flex; 用于在 Safari 中进行测试。
FOOTNOTE. I am a novice only, sharing help from someone who is clearly experienced.
脚注。我只是一个新手，从有经验的人那里分享帮助。
