css3 - div 水平垂直置中

問題描述

想請問一下如何讓p水平垂直置中? 就是不管中間的p大小 他能隨著瀏覽器大小自動置中對齊???

問題解答

每種寫法都會根據你的布局進行一些小小變化。常用margin水平方法：

p { width:200px; margin:0 auto;}

1/2寬高的margin，50%的left、top方法：

p { Width:500px ; height:300px; Margin: -150px 0 0 -250px; position:relative; background-color:pink; left:50%; top:50%; }

LTRB值為0的方法：

p { width: 400px; height: 300px; margin:auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}

transform方法

p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

帶文本元素的話，讓line-height = height：

p { height:30px; line-height:30px; text-align:center;}

flex彈性盒子布局居中,給父元素添加：

p { display: flex; flex-flow: row wrap; width: 408px; align-items: center; justify-content: center;} 回答2：

css3方法可以用flex，給父級添加

.father { display: flex; justify-content: center; align-items: center;}回答3：

p { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}回答4：

父元素設置為relative定位，本元素設置為絕對定位，然后通過top和translateY使其垂直居中

position: absolute; top: 50%; transform: translateY(-50%);回答5：

margin:auto

http://web.jobbole.com/83384/

外面的p{

position: relative;

}中間的p{

position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

}