Question

I am trying to put a div element in the centre of a container div both horizontally and vertically when we don’t know the height of the container.

I have set up the container element to fit the full height and width of the document by absolute positioning, but cannot get the vertical alignment.

.ui .chv {
  text-align: center; 
  position: absolute; 
  top: 60px;
  bottom: 50px; 
  left: 20px;
  right: 20px; 
  display: block;
  margin: 0; 
  height: auto;
  background: green; 
  text-align: center;
  vertical-align: middle;
}

LIVE DEMO

​

Answer 1

vertical-align:middle will work if the div have display:table-cell style.
Div with “display:table-cell” should have a parent div with display:table

Put following html inside<div class="chv"></div>

<div class="table full-width full-height">        
            <div class="table-cell align-middle">
                TEST
            </div>
 </div> 

so the final markup will be like this

<div align="center" class="ui">
    <div class="chv">

        <div class="table full-width full-height">        
            <div class="table-cell align-middle">
                TEST
            </div>
        </div>    

    </div>    
</div>​

See this in jsfiddle

I added .full-width, .full-height classes to set width and height 100%.