CSS 如何实现图片居中

在网页设计中，让图片完美居中是一个常见需求。通过 CSS 不同的属性和方法，可以实现水平居中、垂直居中以及水平垂直同时居中，为网页布局增添美感与协调性。

水平居中

行内元素方法

若图片以行内元素形式存在，例如在段落标签 <p> 内，使用 text-align: center 就能轻松实现水平居中。如代码：

<p style="text-align: center;">
    <img src="your-image.jpg" alt="示例图片">
</p>

块级元素方法

当图片设置为块级元素（display: block）时，通过 margin: 0 auto 可实现水平居中。示例代码：

<img src="your-image.jpg" alt="示例图片" style="display: block; margin: 0 auto;">

垂直居中

绝对定位与负边距

对于已知高度的图片，可以结合绝对定位和负边距来实现垂直居中。先将父元素设置为相对定位，图片设置为绝对定位，通过 top: 50% 使其顶部位于父元素的垂直中心，再用负边距 margin-top 向上拉回自身高度的一半。代码如下：

<style>
   .parent {
        position: relative;
        height: 400px;
    }
   .child {
        position: absolute;
        top: 50%;
        margin-top: -50px; /* 假设图片高度为100px */
    }
</style>
<div class="parent">
    <img src="your-image.jpg" alt="示例图片" class="child">
</div>

水平垂直居中

绝对定位与负边距

类似垂直居中的方法，在水平方向上也做相同处理。将 left: 50% 结合负的 margin-left 拉回自身宽度的一半。代码：

<style>
   .parent {
        position: relative;
        height: 400px;
    }
   .child {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px; /* 假设图片高度为100px */
        margin-left: -50px; /* 假设图片宽度为100px */
    }
</style>
<div class="parent">
    <img src="your-image.jpg" alt="示例图片" class="child">
</div>

弹性布局（Flexbox）

使用 Flexbox 是更为现代和简洁的方式。将父元素的 display 设置为 flex 或 inline-flex，然后使用 justify-content: center 和 align-items: center 分别实现水平和垂直居中。代码如下：

<style>
   .parent {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
    }
</style>
<div class="parent">
    <img src="your-image.jpg" alt="示例图片">
</div>

掌握这些 CSS 实现图片居中的方法，能满足不同场景下的布局需求，提升网页设计的质量与用户体验。