84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
想請問一下如何讓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; }
css3方法可以用flex,给父级添加
.father { display: flex; justify-content: center; align-items: center; }
p { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
父元素设置为relative定位,本元素设置为绝对定位,然后通过top和translateY使其垂直居中
position: absolute; top: 50%; transform: translateY(-50%);
margin:auto
http://web.jobbole.com/83384/
外面的p{
position: relative;
}中间的p{
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
每种写法都会根据你的布局进行一些小小变化。
常用margin水平方法:
1/2宽高的margin,50%的left、top方法:
LTRB值为0的方法:
transform方法
带文本元素的话,让line-height = height:
flex弹性盒子布局居中,给父元素添加:
css3方法可以用flex,给父级添加
父元素设置为relative定位,本元素设置为绝对定位,然后通过top和translateY使其垂直居中
margin:auto
http://web.jobbole.com/83384/
外面的p{
}
中间的p{
}