css图片居中怎么设置

css 中图片居中的方法包括：1. 使用 text-align: center; 2. 使用 margin: auto; 3. 使用 display: flex; 和 justify-content: center; 4. 使用 position: absolute; 和 left: 50%; transform: translate(-50%, -50%);

CSS 中图片居中的方法

在 CSS 中，有几种方法可以将图片居中对齐。

1. 使用 text-align: center;

这是最简单的方法，适用于图像元素在块级元素内的情况。只需将以下 CSS 添加到包含图像的元素：

立即学习“前端免费学习笔记（深入）”；

text-align: center;

示例：

<div style="text-align: center;">
  @@##@@
</div>

2. 使用 margin: auto;

此方法适用于图像元素是块级元素的情况。它会在左右两侧添加自动边距，从而将图像居中对齐。

margin: auto;

示例：

@@##@@

3. 使用 display: flex; 和 justify-content: center;

此方法适用于图像元素不是块级元素的情况。它创建一个弹性容器，并将图像元素居中对齐。

display: flex;
justify-content: center;

示例：

<div style="display: flex; justify-content: center;">
  @@##@@
</div>

4. 使用 position: absolute; 和 left: 50%; transform: translate(-50%, -50%);

此方法将图像元素定位在父元素的中心。transform 属性用于抵消图像自身一半的宽度和高度。

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

示例：

<div style="position: relative; width: 200px; height: 200px;">
  @@##@@
</div>