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


so have div min-height 100%; (100% of screen or more). child holds content , needs centered vertically, might extend parent more 100% of size. child variable in height.

so there way css(3) this?

use display: table; , display: table-cell; properties.

the outer div need have display: table; , inner div display: table-cell; along vertical-align: middle;. mimicing default display of 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. simple search here on or google plenting of results.


Comments