如何让vertical-align:middle;起作用

<html>
<meta charset="utf8">
<style>       
.Absolute-Center { 
      display: table-cell;
      width: 100px;  
      height: 100px; 
      border:1px solid red; 
      text-align:center;
      vertical-align:middle;
      }  
</style>
<body>
<div class="Absolute-Center">
    <p>居中</p>
</div>
</body>
</html>
显示效果如下：

图片描述

可见：vertical-align:middle;起作用了。

下面增加一个div

<html>
<meta charset="utf8">
<style>
.outer{
      width:300px;
      height:500px;
      border:1px solid red; 
      position:relative;
}     
.Absolute-Center { 
      display: table-cell;
      position:absolute;
      margin:auto;
      top:0px;
      bottom:0px;
      left:0px;
      right:0px;
      width: 100px;  
      height: 100px; 
      border:1px solid red; 
      text-align:center;
      vertical-align:middle;
    } 
</style>
<body>
<div class="outer">
<div class="Absolute-Center">
    <p>居中</p>
</div>
</div>
</body>
</html>

效果如下：

图片描述
可见：vertical-align:middle;不起作用了。
请问，
1。为何此时 vertical-align:middle;不起作用了。
2。此时如何使得vertical-align:middle;起作用了。

css html

阅读 14.9k

4 个回答

Humphry

✓ 已被采纳

position: absolute; display: table-cell; equals display: block; position: absolute;. ^1#

And vertical-align only applies to inline/table-cell elements.

Solution: https://jsfiddle.net/dbLb68u1/

1# W3C CSS2.2 Chapter 9.7: Relationships between 'display', 'position', and 'float'

shockw4ver

1k1311

发布于
2016-11-09

其实你的第一个例子并不是vertical-align起作用了，是因为tabel-cell会使内部元素垂直居中，这是表格的特性。

要用这个属性实现垂直居中，其实核心就在于这个需要一个满行高的行内元素来作为参考。在设置了vertical-align: middle的元素的同级元素内添加一个行高为父元素满高度的行内元素（如span），则可以实现。
PS：vertical-align是元素自我属性，不是控制子元素的，也不能继承，要使p元素垂直居中，应当写在p元素的样式上。