本文摘自PHP中文网，作者V，侵删。
css3中让图像居中可以使用【align-items:center】元素和【justify-content:center】元素。align-items属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。
方法：
采用 align-items:center(垂直居中)和justify-content:center(水平居中)这2个属性。
align-items属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。
（学习视频推荐：css视频教程）
html：
1 2 3 | <div class="container container-2">
<img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>
|
css：
1 2 3 4 5 6 7 8 9 10 11 12 13 | .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：
1 2 3 4 | <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：
1 2 3 | .container-1 {position: relative;}
.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
|
相关推荐：CSS教程
以上就是css3中让图像居中可以使用哪个元素的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
CSS3中过渡和动画的区别是什么
html CSS3是什么
jquery获取父窗口的元素
transition属性怎么用
CSS3是什么技术
css如何选取第几个元素
css怎么实现翻转效果
jquery如何获取元素标签
详细了解CSS3中的border-image-slice属性
CSS3多媒体查询的简单介绍（代码示例）
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3中让图像居中可以使用哪个元素
