1

so I have a div which is min-height 100%; (100% of the screen or more). The child holds the content and needs to be centered vertically, but it might extend the parent to more than 100% of its size. This child is variable in height.

So is there a way with only css(3) to do this?

Lukas Oppermann
  • 2,918
  • 6
  • 47
  • 62

1 Answers1

1

Use the display: table; and display: table-cell; properties.

The outer DIV will need to have display: table; and the inner DIV display: table-cell; along with vertical-align: middle;. Now you will be mimicing the default display of a td.

CSS

.parent {
  min-height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; 
}

HTML

<div class="parent">
     <div class="child">child</div>
</div>

This question has been asked often. A simple search here on SO or Google will get you plenting of results.

Community
  • 1
  • 1
hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • Yeah, I did a search and the results did not work, yours did though, because the other people did not specify the display: table; on the parent. Thanks. – Lukas Oppermann Jul 15 '13 at 16:48
  • I have noticed that in the past. People will suggest `display: table-cell;` but not note that the parent element should have `display: table;` also. I will include this in my answer for future users. – hungerstar Jul 15 '13 at 17:02