行内元素居中
html
<span>我要居中</span>
<img1 src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
css
span{
font-size:150px;
vertical-align:middle;
}
img{
vertical-align:middle;
}
before元素居中
html
<div class="box">
<img1 src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</div>
css
.box{
width:300px;
height:200px;
border:1px solid;
text-align:center;
}
.box:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.box img{
vertical-align:middle;
}
table-cell居中
css
.box{
width:300px;
height:200px;
border:1px solid;
text-align:center;
vertical-align:middle;
display:table-cell;
*display:inline-block; //IE6 7
}
垂直居中
html
<div class="parent">
<div class="son">我要居中</div>
</div>
css
1.绝对定位居中
.parent{
position: relative;
}
.son{
position: absolute;/*或fixed*/
left: 50%;
top: 50%;
width:150px;
height:100px;
margin-left:-50px;
margin-top:-50px;
}
2.margin：auto 居中
.son{
position: absolute;/*或fixed*/
top:0;
right:0;
bottom:0;
left:0;
margin: auto;//重要
}
3.css3属性
.son{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);//相对于自身偏移
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
