1

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

​

Vukašin Manojlović
  • 2,645
  • 2
  • 21
  • 26
Walrus
  • 19,801
  • 35
  • 121
  • 199
  • 2
    Possible duplicate: [center div vertically in a % height div?](http://stackoverflow.com/q/3363562/388916) – Hubro Nov 25 '12 at 13:02

1 Answers1

3

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

aju
  • 421
  • 3
  • 8