垂直居中动态高度div中的HTML元素

本文介绍了垂直居中动态高度div中的HTML元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我可以确保< 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:

感谢

推荐答案

使用 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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！