Posted on | by liu
css after 样式，css3fadein，css色修痘印，web前端css8，css让文字在居中显示，css 单倍行数添加样式，css正方体旋转动画
css after 样式，css3fadein，css色修痘印，web前端css8，css让文字在居中显示，css 单倍行数添加样式，css正方体旋转动画
“`
接着，在 CSS 中，大家需要为该类添加样式，使其可以居中显示。大家可以通过以下几种方法实现。
1. 使用 text-align 属性
“`.center-img {
display: block;
margin: auto;
text-align: center;
}“`
这个方法的原理是，大家通过将 img 标签设置为块级元素，并将其左右 margin 值设为 auto，使其水平居中。然后，大家再将包含该 img 标签的 p 标签的 text-align 属性设为 center，使其垂直居中。
2. 使用 flexbox
“`p {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.center-img {
max-width: 100%;
}“`
这个方法的原理是，大家将包含该 img 标签的 p 标签设置为 flex 容器，并将其 justify-content 和 align-items 属性都设为 center，使其水平和垂直居中。同时，大家可以将 img 标签的 max-width 属性设为 100%，以确保图片不会超出容器的宽度。
以上就是两种让图片居中显示的方法。大家可以根据实际需求选择适合自己的方式。