/*第一种方法
margin:auto法 脱离文档流元素的居中*/
css样式
div{
width:400px;
height:400px;
position:relative;
border:1pxsolid#465468;
}
img{
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
html代码
<div>
<img src="pp.jpg">
</div>
当一个元素绝对定位时，它会根据第一个不是static定位的祖先元素定位，因此这里的img根据外层div定位。
/*第二种方法 负margin法*/
css样式
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
}
html代码
<div class="container">
<div class="inner"></div>
</div>
我们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。
/*第三种居中方法 table-cell法 未脱离文档流元素的居中*/
CSS代码：
扫描二维码关注公众号，回复：
523683 查看本文章
div{
width:300px;
height:300px;
border:3pxsolid#555;
display:table-cell;
vertical-align:middle;
text-align:center;
}
img{
vertical-align:middle;
}
HTML代码：
<div>
<imgsrc="mm.jpg">
</div>
div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的。
/*第四种方法 弹性盒子法*/
CSS代码
.container{
width:300px;
height:200px;
border:3pxsolid#546461;
display: -webkit-flex;
display: flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
}
.inner{
border:3pxsolid#458761;
padding:20px;
}
HTML代码：
<divclass="container">
<divclass="inner">
我在容器中水平垂直居中
</div>
</div>
align-items控制垂直方向的居中，justify-content控制水平方向的居中。