How can I vertically center an element if it's parent has responsive height?

Question

I have an element which I want to take up the lower half of the screen, at least, but still allow text to make it larger. Naturally, I would use min-height, but that seems to fail when it comes to vertically centering the text within.

I can't use position:absolute because it needs to remain in the DOM.

Here is a mockup of the situation:

* {
  margin: 0;
  padding: 0;
}
body {
  height: 1000px;
}
.img {
  height: 50%;
  width: 100%;
  background: lightblue;
}
.text {
  min-height: 20%;
  background: coral;
  text-align: center;
  margin: 0 15%;
}
.centered {
  /* I need to center this within it's parent */
}

<body>
  <div class="img"></div>
  <div class="text">
    <div class="centered">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris  tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
    </div>
  </div>
</body>

Did you read your post first related question? http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div?rq=1 — Arashsoft, Dec 11 '15 at 17:58
Yes, I did. Either the solutions require fixed height, or they require `position:absolute` (I have text so that won't work). — Aaa, Dec 11 '15 at 18:01

score 2 · Accepted Answer · answered Dec 11 '15 at 18:11

* {
  margin: 0;
  padding: 0;
}
body {
  height: 1000px;
}
.img {
  height: 50%;
  width: 100%;
  background: lightblue;
}
.text {
  min-height: 20%;
  background: coral;
  text-align: center;
  margin: 0 15%;
  display: table;
}
.centered {
  /* I need to center this within it's parent */
  display: table-cell;
vertical-align: middle;
}

<div class="img"></div>
  <div class="text">
<div class="centered">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris  tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
</div>
  </div>

I had hoped to avoid using tables, but it seems that's the only way. Oh well! — Aaa, Dec 12 '15 at 00:20

score 1 · Answer 2 · answered Dec 11 '15 at 18:21

1

I was able to do this with display: flex and some padding. See fiddle.

answered Dec 11 '15 at 18:21

samurai_jane

665
7
18

I may have posted my answer too quickly because padding alone on the top and bottom also does the trick. – samurai_jane Dec 11 '15 at 18:25
I prefer to not use flex. Wish I could! – Aaa Dec 11 '15 at 20:47
Padding on the top and bottom fails when the min-height kicks into effect. – Aaa Dec 11 '15 at 20:53
I'm not seeing where it fails. Can you include a screenshot and let me know at what browser width it fails? – samurai_jane Dec 12 '15 at 14:33
When the element is resizing to the text, it looks fine (when it is greater than 20%). However, when the text has excess room, only the top padding is used, and the rest of the element is just a big space. I do have screenshots, if you still need them. – Aaa Dec 12 '15 at 20:41
Still not seeing this. Please let me know what browser you are using, the browser width where you see this fail, and a link to a screen shot. I was out for a few days but will get right back to you. Thanks! – samurai_jane Dec 14 '15 at 22:42
This happens on every browser. [Here's the screenshots](http://imgur.com/a/RhPfQ), the first is when the window is zoomed normally (the text is resizing the container) and the second is when the min-height is dictating the height (the text is too spread out to have an effect, so only the top padding works). – Aaa Dec 16 '15 at 20:08
Very sorry but I am not able to duplicate what you are seeing. If you are working locally, there is probably a conflict but without seeing all the code, I can only guess. Something appears to be overriding your `padding` when `min-height` kicks in. I'd try modifying the code in my fiddle to `padding: 30px !important;` to see if that solves it. If so, then it's just a matter of tracking down the conflict. If that doesn't work, turn off `min-height` to see if the same thing happens– if so, then you have another bug to track down. Sorry I wasn't able to fully resolve this for you. – samurai_jane Dec 17 '15 at 21:54
Not a problem, I was able to find a better situation. This is a really weird occurrence though, if you're not seeing it, are you using this code when testing? http://jsfiddle.net/jos5khxo/2/ – Aaa Dec 18 '15 at 22:25

How can I vertically center an element if it's parent has responsive height?

2 Answers2