如何在绝对定位的父div中垂直居中div
我正在尝试在粉红色的容器中获得蓝色容器，但似乎是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>
结果：
期望：
请build议我怎么做到这一点。
的jsfiddle
首先请注意， vertical-align仅适用于表格单元格和内联级别元素。
有几种方法可以实现垂直alignment，这可能会或可能不会满足您的需求。 不过，我会告诉你我最喜欢的两种 方法 ：
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>
用这个 ：
.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
请参阅此链接： https : //www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
在绝对定位的div中使用flex blox来居中其内容。
看例子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; }
你可以使用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>
请检查这个答案类似的问题。
这是我find的最简单的方法。
https://stackoverflow.com/a/26079837/4593442
注意。 我用display：-webkit-flex; 而不是显示：flex; 在Safari里面进行testing。
脚注。 我只是新手，分享明确经验的人的帮助。
垂直和水平居中：
.parent{ height: 100%; position: absolute; width: 100%; top: 0; left: 0; } .c{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
这里是使用Top对象的简单方法。
例如：如果绝对元素大小是60px。
.absolute-element { position:absolute; height:60px; top: calc(50% - 60px); }
