方法一：
我们知道，对于inline-block 元素，设置text-align:center;可以让其在容器内水平居中，但垂直居中就有些问题了，这里，我们要借助表格来完成：
我们设置想要居中的元素的容器的CSS属性：
display: table-cell;
text-align:center;
vertical-align: middle;
相当于把容器视为一个td，然后内部的内容进行居中设置。
但有一个瑕疵：容器 必需用数值设置 width、height，设置百分比还不行，应该是因为当容器视为td后，它的高宽由内部因素撑起，而不是依靠百分比计算。
方法二：
设置容器和待居中因素的position属性，利用其可以用百分比定位的属性。
#div1{
width:100%;
height:100%;
background-color:green;
position:relative;
}
#img1{
position:absolute;
top:50%;
left:50%;
margin-top:-215;
margin-left:-410;
}
在此方法里，百分比倒是可以用了，但是必需知道待定位的元素的width、heigth，以将其回移一些，不然不是居中。
方法三，和方法二差不多
#img1{
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
主要是这个不用知道待定位元素的宽高
方法四
#img1{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
思想和方法二一样，即先把待定位元素的顶、左边距给设置为50%，再回退待定位元素的宽高的一半。主要是回退的方法不一样，方法二采用人工接受，写死的方法。这里采用translate方法自动计算。
方法五
display:flex;
justify-content: center;
align-items:center;
三行代码搞定，设置容器的display，然后设置相关属性即可。
csdn插图点击居中是这样实现的：
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 99999999;
background: rgba(255, 255, 255,0.8);
overflow: auto;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
https://www.cnblogs.com/chen-cong/p/8076442.html
https://segmentfault.com/q/1010000003490990/a-1020000003491167
