其中内容居中:
1.利用line-height属性
.style1{
width:200px;
height:200px;
line-height:200px;
text-align:center;
background:red;
}
2.利用display:table-cell属性。
.style2{
display:table-cell;
vertical-align:middle;
text-align:center;
width:200px;
height:200px;
background:red;
}
整块居中:
1.使用position:fixed或position:absolute属性,设置left、top、margin-left、margin-top。
.style3{
position:absolute;/position:fixed;/
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
2.使用position:fixed或position:absolute属性,设置margin:auto。
.style4{
position:absolute;/position:fixed;/
width:200px;
height:200px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:red;
}
CSS垂直水平居中有很多种,目前学习到这几种,欢迎大神们给出意见建议或补充~