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