html - 在 div 中垂直居中内容，其中尺寸由图像设置

Question

我有一个相对定位的 figure 图像如下:

<figure>
  <img src="image.jpg" width="100%" />
</figure>

figure { 
  position: relative; 
  display: block; }

figure 从图像中获取它的高度。现在，假设我向将位于图像顶部的 figure 添加了绝对定位的内容。内容没有设置高度，可以是多行的。我通常会这样做:

<figure>
  <img src="image.jpg" width="100%" />
  <figcaption>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  </figcaption> 
</figure>

figure {
  position: relative;
  display: block; }

figcaption {
  position: absolute;
  display: table;
  top:0; right:0;
  bottom:0; left:0;
  width:100%; height:100%; }

figcaption span {
  display: table-cell;
  vertical-align: middle; }

然而，尽管 figcaption 具有 100% 的高度和宽度，加上所有 4 个位置都设置为 0，它仍然没有填满整个图形，这意味着垂直居中不起作用。

有没有办法让 figcaption 在 figure 从内部图像获取高度时获取 100% 的高度？或者在这种情况下还有另一种垂直居中的方法吗？

Answer 1

您只需在 figcaption 上设置 margin: auto;，就非常接近了。

figure {
  position: relative;
  display: block;
}
figcaption {
  position: absolute;
  display: table;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /* Added */
  width: 100%;
  height: 100%;
}
figcaption span {
  display: table-cell;
  vertical-align: middle;
}

<figure>
  <img src="image.jpg" width="100%" />
  <figcaption> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>

  </figcaption>
</figure>