如何让带交互效果的图片链接行在所有显示器上居中对齐？

要让这些带交互效果的链接图片在任意尺寸屏幕上都居中，最可靠的方法是给它们套一个容器，用Flex布局实现自适应居中。以下是具体修改步骤：

1. 给图片添加容器 #

把所有<figure>元素包裹在一个带类名的容器里，比如image-grid：

<div class="image-grid">
  <figure class="snip0015">
    <img src="http://open-sky.org/images/rough.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Roughnecks -</h5>
      <a href="http://www.open-sky.org/index.php/roughnecks"></a>
    </figcaption>
  </figure>
  <figure class="snip0015">
    <img src="http://open-sky.org/images/long.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Longistics -</h5>
      <a href="http://www.open-sky.org/index.php/longgistics"></a>
    </figcaption>
  </figure>
  <figure class="snip0015">
    <img src="http://open-sky.org/images/rnd.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Research & Development -</h5>
      <a href="http://www.open-sky.org/index.php/r-d"></a>
    </figcaption>
  </figure>
  <figure class="snip0015">
    <img src="http://open-sky.org/images/force.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- F.O.R.C.E. -</h5>
      <a href="http://www.open-sky.org/index.php/force"></a>
    </figcaption>
  </figure>
  <figure class="snip0015">
    <img src="http://open-sky.org/images/med.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Trauma -</h5>
      <a href="http://www.open-sky.org/index.php/trauma"></a>
    </figcaption>
  </figure>
</div>

2. 修改CSS样式 #

添加容器的Flex布局样式，同时调整figure的原有样式：

/* 新增容器样式 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px; /* 可选：设置图片之间的间距 */
  padding: 20px 0; /* 可选：给容器上下加内边距 */
}

/* 调整原figure样式 */
figure.snip0015 {
  /* 去掉原来的display: inline-block和margin: auto */
  display: block;
  margin: 0; /* 由容器的gap控制间距 */
  color: #fff;
  position: relative;
  width: 100%;
  max-width: 340px;
  max-height: 200px;
  background: #000000;
  text-align: center;
  overflow: hidden;
}

/* 以下保留原有的交互样式 */
figure.snip0015 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0015 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}
figure.snip0015 figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: "";
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015 h5,
figure.snip0015 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;
}
figure.snip0015 h5 {
  word-spacing: -0.05em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015 h5 span {
  font-weight: 800;
}
figure.snip0015 p {
  font-weight: 200;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0015:hover img {
  opacity: 0.35;
}
figure.snip0015:hover figcaption h5 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015:hover figcaption p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

为什么这个方法有效 #

原来的inline-block搭配margin: auto无法实现全局居中，是因为inline-block元素的居中依赖父元素的text-align，且多个元素排成一行时，超出屏幕后不会自动调整居中换行。而Flex布局的justify-content: center会让容器内的元素始终在水平方向居中，flex-wrap: wrap则会在屏幕宽度不足时自动换行，完美适配各种尺寸的显示器。

内容的提问来源于stack exchange，提问作者Failsafe