如何让元素居中

水平垂直居中问题，在css中margin: 0 auto;可以实现水平居中，但是在垂直居中方面一直没有特定的属性，直到css3的出现，有了弹性盒，可以通过设置弹性盒直接设置居中位置，做浏览器兼容的话可以通过使用一些hack处理负margin方法，table-cell方法，位移方法。

1.负margin的方法

css代码：

.box{
width: 800px;
height: 600px;
border: 3px solid #000;
position: relative;
}
img{
width: 320px;
height: 438px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -160px;
margin-top: -219px;
}

html代码：

<div class="box">
    <img src="../img/mmexport1493913001859.jpg" alt="">
</div>

效果如下

微信截图_20190715210436.png

这里，我们首先用top:50%和left:50%让img的坐标原点（左上角）移动到box的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样img的中心点就跟box的中心点对齐了。

2.table－cell方法

css代码：

.box{
width: 800px;
height: 600px;
border: 3px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}

html代码同上

通过将盒子转换为table元素，table元素本身是可以通过属性来控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的

3.弹性盒子法

css代码

.box{
width: 800px;
height: 600px;
border: 3px solid #000;
display: flex;
align-items: center;
justify-content: center;

}

html代码同上
align-items控制垂直方向的居中，justify-content控制水平方向的居中。这是CSS3的新方法

4.位移方法
位移方法和margin定位方法一样，只不过吧margin改成了位移不需要计算一半是多少，直接transform:translate(-50%,--50%)