div垂直居中的几种方法

  本文方法来自网络,在此只做总结,原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html

方法一:单行垂直居中只需要设置它的实际高度height和所在行的高度line-height相等即可          

div {                
    height:25px;
     line-height:25px;
    overflow:hidden;               
}

            overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了

方法二:多行未知高度文字的垂直居中就是设定Padding,使上下的padding值相同即可

    

div {
    padding:25px;
} 

方法三:多行文本固定高度的居中,让<div>模拟<table>就可以使用vertical-align了。

    注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素

    注:此方法在IE6及其以下版本中无效

方法四:完美的解决方案,要用到CSS hack的知识

div#wrap {
    display:table;           
    _position:relative; 
    overflow:hidden;        
}       
div#subwrap {
    vertical-align:middle;
    display:table-cell;
    _position:absolute;
    _top:50%;       
}       
div#content {          
    _position:relative; 
    _top:-50%;       
}
原文地址:https://www.cnblogs.com/aotian/p/3445267.html