如何在 CSS 中居中图片？

要在 CSS 中居中图片，我们将根据布局的需要，将图片在容器内水平和垂直对齐。

水平居中图片

1. 使用 text-align 属性

在块级容器中水平居中图片最简单的方法是使用 text-align 属性。当图片是内联或内联块级元素时，这种方法效果很好。

#### 语法

.parent {
    text-align: center;
}

HTML


CODEBLOCK_42923ef4

Output

2. 使用 margin 属性

当图片被设置为块级元素时，我们可以通过将左右边距设置为 auto 来居中它。

#### 语法

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

HTML


CODEBLOCK_76d8d2e0

Output

3. 使用 Flexbox

Flexbox 是一种布局模型，可以轻松地水平和垂直居中图片。通过将容器的 display 设置为 flex，我们可以用最少的代码居中图片。

#### 语法

.parent {
    display: flex;
    justify-content: center;
}

HTML


CODEBLOCK_5f39f25d

Output

4. 使用 CSS Grid

CSS Grid 也允许直接进行居中。通过定义一个网格容器并使用 place-items 属性，我们可以轻松地居中图片。

#### 语法

.parent {
    display: grid;
    place-items: center;
}

HTML


CODEBLOCK_1c97aca8

Output

垂直居中图片

1. 使用 Line Height

如果要在固定高度的容器内垂直居中图片，我们可以将容器的 line-height 设置为其高度。这种方法适用于单行文本和小图片。

HTML


CODEBLOCK_98e60585

Output

2. 使用 Absolute Positioning

绝对定位允许我们相对于其最近的已定位祖先精确放置元素。通过将绝对定位与变换结合使用，我们可以使元素在其容器内居中。

#### 语法

.parent {
    position: relative;
    height: 100vh;
}

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

HTML


CODEBLOCK_24c8256a

Output

在容器中居中图片

在较大的容器内居中图片时，确保容器具有定义的尺寸至关重要。下面是使用 Flexbox 在固定大小的容器内居中图片的方法。

HTML


CODEBLOCK_3fe8239a

Output

!image-centering在容器中居中图片