居中:盒子在其包含塊中居中
1.行盒(行塊盒)水平居中:
直接設定行盒(行塊盒)父元素的text-align屬性:center
2.常規流塊盒水平居中:
定寬,設定左右margin為auto;
div{
width:100px;
margin:0 auto;
}
3.絕對定位的水平居中:
定寬,設定左右的坐標為0(left:0, right:0),將左右的margin設定為auto
div{
width:100px;
left:0;
right:0;
margin:0 auto;
}
3.單行文本垂直居中
設定文本所在的元素的行高,為整個區域的高度:line-height:100px;
4.行塊盒或塊盒內多行文本的垂直居中
沒有完美解決方案
設定盒子上下內邊距(padding)相同,來達到類似的效果
也可以使用下面5所介紹的垂直居中方案,
5.絕對定位的垂直居中
定高,設定上下的坐標為0(top:0, bottom:0),將上下margin設定為auto
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/45552.html
標籤:Html/Css
下一篇:【Vue】搭建開發環境
