本文摘自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做出多样边框特效
css实现基于用户滚动应用（代码）
在html中怎样让flash不遮挡div元素
css如何使用计数器给元素自动编号？css计数器的使用（代码示例）
CSS3跟css区别是什么
在html元素中如何嵌入图像
使用html5/CSS3五步快速制作便签贴特效代码示例分享（图文）
html CSS3是什么
详解CSS3实现弹性布局的方式
CSS3给背景图层加颜色遮罩的方法
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css3中让图像居中可以使用哪个元素
