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{
}