不定寬高的文字在div中垂直居中的三種方法

本人在面試的時候被問到：如何讓一段不定寬高的文字垂直居中呢？

現在來總結一下：

在body中寫入結構

main">
    < div id="login">
        djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh ;

方法一：

#main{

position
: relative;    //在父元素中使用相對定位width
: 200px;height
: 200px;overflow
: hidden;background-color
: #ff0;#padding
: 10px;}#login{
position: absolute;   /*在子元素中使用
絕對定位
*/top
:50%;                /*距離相對於父親元素的50%的高*/##left

:50%;

##background-color: #eee ;-webkit-transform:translate(-50%,-50%);    /*CSS3的樣式，:translate(-50%,-50%)相對於自己距離x軸和y軸的-50% */}

方法二：

#main{

width: 200px;

height: 200px;

background-color: #eee;

display
: table;    /*讓標籤元素以
表格
的形式呈現*/}#login{display: table-cell;    /* ie7和ie6都無法辨識display: table-cell;*/
vertical-align
: middle;
}

以上是不定寬高的文字在div中垂直居中的三種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn