垂直居中动态高度div中的HTML元素 [英] Vertically Center HTML Element Within a Div of Dynamic Height

问题描述

可能重复：

vertical-align：middle does not work

我可以确保< a>< / a> 垂直居中在这个div，不管div的大小：

How can i make sure that the <a></a> is vertically centered in this div, regardless of the size of the div:

http://jsfiddle.net/XF9WM/

感谢

推荐答案

使用 display：table

Using display:table and display:table-cell, which works in all modern browsers (IE 8+):

.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%;
}

这篇关于垂直居中动态高度div中的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！