在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。
在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在css图片水平垂直居中的方法有很多种，这里给你一一列举一下
1、使用display:table-cell和vertical-align:middle属性即可;类似使用table的valign:middle功能;
2、使用绝对定位position:absolute;通过给图片左上50%，然后再margin他们宽高的一半既可以实现图片垂直居中;
3、使用flex布局;flex功能为新功能，考虑到兼容性的问题，在手机端应用较好，pc端建议使用前边2个方式。
