CSS 中如何让图像居中

在 CSS 中，让图像居中可以使用多种方法：

使用文本对齐属性

img {  display: block;  margin: 0 auto;}

• display: block 使图像成为一个块元素。
• margin: 0 auto 自动设置图像的左右外边距，使其在父元素中水平居中。

使用 flexbox 布局

.container {  display: flex;  justify-content: center;  align-items: center;}img {  width: 100px;  height: 100px;}

• 创建一个 flexbox 容器（.container）。
• justify-content: center 将子元素（图像）在水平方向上居中。
• align-items: center 将子元素在垂直方向上居中。

使用网格布局

.container {  display: grid;  place-items: center;}img {  width: 100px;  height: 100px;}

• 创建一个网格容器（.container）。
• place-items: center 将子元素（图像）同时在水平和垂直方向上居中。

使用绝对定位

img {  position: absolute;  left: 50%;  transform: translate(-50%, -50%);}

• 使用绝对定位将图像从其正常流中移除。
• left: 50% 将图像水平居中，但它将相对于其父元素的左边界居中。
• transform: translate(-50%, -50%) 将图像向左和向上移动其自身宽高的 50%，从而在父元素中居中。

以上就是css中img居中怎么设置的详细内容，更多请关注css网站其它相关文章！