DIV左右居中
需要固定div宽度
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
margin:0 auto;
width:500px;
height:auto;
}
DIV 上下左右居中
缺点:需要固定宽高
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
position:relative;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
/*此时宽和高都要固定*/
width:500px;
height:500px;
}
Img居中
父div display:table-cell
<div>
<div style="display:table-cell;width:700px;height:500px;text-align:center;vertical-align:middle;">
<img src="1.png" style="max-width:100%;max-height:100%;" />
</div>
</div>
translate居中
div{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
}