如何使用 CSS 使图片居中

在网页设计中，让图片完美居中是一项常见需求。合理运用 CSS 技术能轻松实现这一效果，为页面布局增添美感与协调性。以下将介绍几种常见的使用 CSS 使图片居中的方法。

行内元素水平居中

对于行内元素的图片，使图片在父元素中水平居中相对简单。只需在父元素的 CSS 样式中设置 text-align: center 即可。例如：

.parent {
    text-align: center;
}

这种方法适用于图片宽度小于父元素宽度的情况，通过将父元素的文本对齐方式设为居中，图片作为行内元素也会随之居中显示。

块级元素水平居中

若图片被设置为块级元素，要使其水平居中，可利用 margin: 0 auto 属性。示例代码如下：

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

这段代码将图片显示模式设为块级，同时将左右外边距设为自动。这样浏览器会自动分配左右外边距，使图片在父元素中水平居中。

绝对定位与负边距实现水平垂直居中

当需要让图片在父元素中水平垂直都居中时，可使用绝对定位与负边距的方法。首先给父元素设置 position: relative，让其成为定位上下文；然后给图片设置 position: absolute，并将 top 和 left 设为 50%，使图片左上角位于父元素中心。接着，利用负边距将图片向上和向左移动自身宽度和高度的一半，从而实现完全居中。代码示例：

.parent {
    position: relative;
}
img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* 图片高度的一半 */
    margin-left: -50px; /* 图片宽度的一半 */
}

弹性布局（Flexbox）实现居中

使用 Flexbox 是一种现代且简洁的方式来使图片居中。给父元素设置 display: flex，然后利用 justify-content: center 实现水平居中，align-items: center 实现垂直居中。示例如下：

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

这种方法对于响应式设计非常友好，能适应不同屏幕尺寸和设备类型。

通过这些 CSS 技巧，开发者可以根据实际需求灵活选择合适的方法，让图片在网页中精准地实现居中显示，提升页面整体视觉效果。