方法：
采用 align-items:center(垂直居中)和justify-content:center(水平居中)这2个属性。
align-items属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。
（学习视频推荐：css视频教程）
html：
<div class="container container-2"> <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/ahr0cdovl3d4lnfsb2dvlmnul21tb3blbi9yefq5vglhsjfpymyzdfk4b2henhfpymxktudebk1nrxfuzvdlzk5py2lic1h1mjfzdhaxv1o2bgsxutfvee9vszy4qvjea0trz05oywgzetfzy01yuup3clbrlza="></div>
css：
.container-2 { display: -webkit-box; display: -ms-flexbox; display: flex-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-align: center;}
还可以利用绝对定位+margin来实现。
图片相对外层浮动，然后margin: auto
html：
<h3 class="demo">绝对定位+margin</h3><div class="container container-1"> <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/ahr0cdovl3d4lnfsb2dvlmnul21tb3blbi9yefq5vglhsjfpymyzdfk4b2henhfpymxktudebk1nrxfuzvdlzk5py2lic1h1mjfzdhaxv1o2bgsxutfvee9vszy4qvjea0trz05oywgzetfzy01yuup3clbrlza="></div>
css：
.container-1 {position: relative;}.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
相关推荐：css教程
以上就是css3中让图像居中可以使用哪个元素的详细内容。