Center div in parent with only min-height, and child may without height & with relative position

Question

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?

Answer 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.

• How to vertically center divs?
• Align vertically using CSS 3