84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
想請問一下如何讓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{
}