CODEWITHSUNDEEP
htmlcssvertical-alignment
Nick
Nick

Reputation: 1499

HTML: Vertical align div in div

I would like to vertical center a div in another div, but I don't get it to work. The image div needs to be centered in the parent (black) div. I've already tried the 

position: absolute;

fix, as well as the 

display: table-cell;

but they both don't seem to work. The probleems seems to be my parent div being 100%.. Can anybody help me out? The example is here:

http://jsfiddle.net/mkGXx/

Upvotes: 0

Views: 2571

Answers (1)

FelixH
FelixH

Reputation: 145

<div style="display: table; height: 800px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br />
        any content<br /><br /><br />
        everything is vertically centered
      </div>
    </div>
  </div>

see at: http://jsfiddle.net/9eDXM/

Upvotes: 1

Related Questions