Question

可能重复：
vertical-align: middle doesn't work

如何确保<a></a>在此div中垂直居中，无论div的大小如何：

由于

Answer 1

使用适用于所有现代浏览器（IE 8 +）的display:table和display:table-cell：

.post {
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.8);
    display:table;
}

.post h2 {
    text-align: center;
    width: 100%;
    height: 100%;
    display:table-cell;
    vertical-align: middle;
}

.post h2 a {
    color: #f7f7f7;
    font-size: 2.2em;
    font-weight: normal;
    font-style: italic;
    width: 100%;
}

Answer 2

我想以不同的方式实现它，（只是为了好玩），这个也是有效的： jsFiddle

这个想法是使用高度为50％的:before块元素。

html, body{
 height:100%;
}

.post {
    width: 400px;
    height: 300px;
    background: rgba(0,0,0,0.8);
}

.post h2:before{
   content:"";
   display:block;
   height:50%;
}

.post h2 {   
    text-align:center;   
    height:100%; 
}

.post h2 a {
    color: #f7f7f7;
    font-size: 2.2em;
    margin-top:-20px;
    display: block;
}

希望它有所帮助： - ）

Answer 3

<强> [增订]

你也可以这样做：jsFiddle

.post {
    width: 400px;
    height: 200px;
    background: rgba(0,0,0,0.8);
    position:relative;    
}

.post h2 {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;

}

.post h2 a {
    line-height:100%;
    color: #f7f7f7;
    font-size: 2.2em;
    margin-top:-20px;
    display: block;
}

Answer 4

为链接提供比文本更大的行高，并在中间垂直对齐。然后绝对将div中的父元素定位在top: 50%并且上边缘减去链接线高的一半：

jsFiddle

.post {
    position: relative;
}
.post h2 {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -150px;
}
.post h2 a {
    vertical-align: middle;
    line-height: 300px;
    white-space: nowrap;
}

它甚至适用于IE7。

Answer 5

如果您不介意添加额外的HTML类，最简单的方法就是使用vertical-align：middle。

http://jsfiddle.net/Wexcode/HtNJM/

<div class="post">
    <span></span><h2><a href="#">Hello!</a></h2>
</div>

CSS：

* { margin: 0; padding: 0; }

.post {
    background: rgba(0,0,0,0.8);
    width: 200px;
    height: 200px; }

.post span {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }

.post h2 {
    position: relative;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    display: inline-block; }

.post h2 a {
    color: #f7f7f7;
    font-size: 2.2em;
    font-weight: normal;
    font-style: italic;
    display: block; }

在动态高度的Div内垂直居中HTML元素

5 个答案: