前言
今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。
方法一：margin:auto
子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。
CSS代码：
div{
width: 600px;
height: 600px;
position: relative;
border: 1px solid #000000;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}HTML代码：
<div>
<img src="avatar.jpg">
</div>效果图：
方法二：flex弹性盒子法
利用flex，align-items:center是控制垂直方向居中，justify-content:center是控制水平方向的居中。
CSS代码：
div{
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000000;
}
img{
}HTML代码：
<div>
<img src="avatar.jpg">
</div>效果图：
方法三：margin:负数法
margin可以为负数是我在牛客上报了个课之后才学到的，在那之前一直没有试过。
道理其实跟方法一差不多，通过百分比将图片移动到容器中心，再对齐中心点就行了。
要记住margin如果是负数的话就是向该方向移动，例如margin-left:-100px;，就是向左移动100px。它与正常添加margin是撑开正好相反。
还不明白可以去写个小demo就懂啦。
CSS代码：
div{
width: 600px;
height: 600px;
position: relative;
border: 1px solid #000000;
}
img{
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
}HTML代码：
<div>
<img src="avatar.jpg">
</div>效果图：
方法四：table-cell法
这应该算是很老的方法了吧，我没有这么写过。是在百度上搜索得到的结果，完后尝试写了一下。
有个问题，因为按照理解，我觉得img里不加那个应该也是居中的，但是我加了之后在浏览器调试发现，他向上偏移了一些肉眼大概数不出来的距离，在img里加上之后才消失，不知道为什么，希望有大佬可以告知。
CSS代码：
div{
width: 600px;
height: 600px;
display: table-cell;
text-align: center;
border: 1px solid #000000;
}
img{
vertical-align: middle;
}HTML代码：
<div>
<img src="avatar.jpg">
</div>效果图：
方法五：translate(-50%,-50%)
translate()函数可以将元素向指定的方向移动，我们可以利用它来做成与方法三相同的事情。
CSS代码：
div{
width: 600px;
height: 600px;
position: relative;
border: 1px solid #000000;
}
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}HTML代码：
<div>
<img src="avatar.jpg">
</div>效果图：
最后
说一下我自己的感受吧，这一共是五种方法，我用过1、2、3、5，其中2和5我用的较多，又以2为最多。
日后如果见到还有别的，也会记录在此的。
点个赞，我们一起学习进步吧♥
