讓一個元素垂直水平居中的三種方法

第一種方法:

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}

*相容性好;缺點:必須知道元素的寬高

-------------

第二種方法：

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

*這是css3裡的樣式;缺點:相容性不好，只支援IE9+的瀏覽器

---------------

第三種方法

p.box{
weight:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

*相容性較好，缺點:不支援IE7以下的瀏覽器

以上就是讓一個元素垂直水平居中的三種方法的內容，更多相關內容請關注PHP中文網（www.php.cn）！