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%);

}