css 图片文字居中显示 |css代码与效果不一样

.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.center img {
display: block;
margin: auto;
}

以上代码中，大家定义了一个.center的样式，并将其设置为flex布局，这样可以实现内容的水平和垂直居中显示。同时，大家也设置了文本的居中对齐方式。

接下来，如果你想让一个图片在这个容器中居中显示，只需要将这个图片的display属性设置为block，并将其margin设置为auto即可。

例如：

<div class="center">
<img src="example.jpg">
<p>这是一个居中显示的文字</p>
</div>

以上代码中，大家在.center容器中放置了一个图片和一段文字，因为大家已经定义了.center样式，所以这个图片和文字会自动水平和垂直居中显示。