如何实现 CSS 图片居中

在网页设计中，让图片在容器中居中是一个常见需求。掌握 CSS 图片居中的方法，能够提升页面的美观度与布局合理性。本文将详细介绍几种常见且有效的实现方式。

水平居中

对于行内元素的图片，若想实现水平居中，可对其父元素设置 text-align: center。例如，在一个 div 容器中放置图片，给 div 添加 text-align: center 样式，图片就能在水平方向上位于容器中央。代码如下：

.parent {
  text-align: center;
}

<div class="parent">
  <img src="example.jpg" alt="示例图片">
</div>

若图片为块级元素，可以使用 margin: 0 auto 来实现水平居中。设置图片的左右外边距为 auto，浏览器会自动将图片在父容器中水平居中显示。代码如下：

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

垂直居中

当需要图片垂直居中时，对于已知高度的父容器，可以使用绝对定位和负边距的方法。将图片的 top 和 left 定位为 50%，然后通过负边距将其向上和向左移动自身宽度和高度的一半，从而实现垂直和水平方向的居中。代码如下：

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

使用 flexbox 布局是更为简便的方式。给父容器设置 display: flex，然后使用 align-items: center 和 justify-content: center 分别实现垂直和水平方向的居中。代码如下：

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

对于 grid 布局，同样能轻松实现图片居中。给父容器设置 display: grid，然后使用 place-items: center 即可同时实现水平和垂直居中。代码如下：

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

在实际应用中，需根据项目的具体情况和兼容性要求，选择最合适的 CSS 图片居中方法。掌握这些技巧，能让网页布局更加美观和专业。