CSS – 使图片居中显示的方式总结
在CSS中居中图片是我们在写web时经常需要实现的需求，本文简单的总结几种在css如何使图片居中显示的方式。
1 text-align居中
图片标签img是一个内联元素，而text-align属性居中只对块级元素有效，所以我们需要使用div包含img，然后设置这个div的text-align属性为center，就可以让图片居中显示了。
如
<div>
<img src="text.png" alt="图片" />
</div>
css设置如下
div {
text-align: center;
}
2 Flex居中图片
对于第1节中的
<div>
<img src="text.png" alt="图片" />
</div>
我们也可以使用flex，我们可以将css设置如下
div {
display: flex;
justify-content: center;
}
上述css可以让图片水平居中显示，如果想要图片垂直居中，则需要将align-items设置为center，如
div {
display: flex;
justify-content: center;
align-items: center;
}
3 Grid居中图片
对于第1节中的
<div>
<img src="text.png" alt="图片" />
</div>
我们还可以使用Grid将图片居中，如
div {
display: grid;
place-items: center;
}
上述place-items的值为center时，在水平方向和垂直方向都是居中的。
4 使用margin属性将图片居中
如果img不被div所包含我们也可以为图片设置自动的左右边距来使其居中。但是和 text-align 属性一样，margin 属性只对块级元素有效。所以我们必须先将img转换称为块级元素，然后再设置其margin属性，如
img {
display: block;
margin: 0 auto;
}
在这个基础上我们也可以为图片增加width属性，用于控制图片显示的宽度
img {
display: block;
margin: 0 auto;
width: 60%;
}
欢迎扫码关注我的微信公众号，及时获取文章更新
本文作者：StubbornHuang
版权声明：本文为站长原创文章，如果转载请注明原文链接！
原文标题：CSS – 使图片居中显示的方式总结
原文链接：https://www.stubbornhuang.com/2768/
发布于：2023年08月28日 14:18:31
修改于：2023年08月28日 14:18:31
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
文章末尾
评论
72