Vertically center content in div where dimensions are set by image

Question

I have a relatively positioned figure with an image in like so:

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

figure { 
  position: relative; 
  display: block; }

figure takes it's height from the image. Now, say I add absolutely positioned content to figure that will sit on top of the image. The content has no set height and could be multi-line. I would usually do this sort of thing like this:

<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; }

However, despite figcaption having 100% height and width, plus all 4 positionings set to 0, it still doesn't fill the whole figure, meaning the vertical centering doesn't work.

Is there a way to make figcaption take 100% height when figure takes it's height from the image within? Or is there another way to vertically center in this situation?

Do any of these answers help? http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block/25799339#25799339 — Josh Crozier, Feb 25 '15 at 16:04
`However, despite figcaption having 100% height and width, plus all 4 positionings set to 0, it still doesn't fill the whole figure, meaning the vertical centering doesn't work.` Because there is no set height. — Ruddy, Feb 25 '15 at 16:08
@Ruddy yes but if I change figure to `display:block` it's more than happy to take the 100% height and width. — CaribouCode, Feb 25 '15 at 16:09
@Coop Oh, set `margin: auto;`. Is that what you mean? [**Demo**](https://jsfiddle.net/8LjajquL/) — Ruddy, Feb 25 '15 at 16:11

score 1 · Answer 1 · answered Feb 25 '15 at 16:10

1

Setting the top and bottom to 0 doesn't automatically center it. Here's an example: http://jsfiddle.net/sgcdpert/

figcaption {
  position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

answered Feb 25 '15 at 16:10

Jonas Grumann

10,438
2
22
40

I never thought to do it that way, it's very clever! I knew the `top:0; bottom:0;` wouldn't center it vertically, that was just to give it 100% height. The `display:table-cell` and vertical-align:middle should then have done the centering. – CaribouCode Feb 25 '15 at 16:13

score 1 · Accepted Answer · answered Feb 25 '15 at 16:14

You just have to set margin: auto; on figcaption, you was pretty close.

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>

Vertically center content in div where dimensions are set by image

2 Answers2