vertical align Image Block at middle

Question

I need to align image at the middle of the page. I used margin:auto to align middle horizontally.

How do I align the div block middle vertically. I have below conditions to follow.

Here is my jsfiddle.

This is a common problem. Check out this question: http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — alf, Jul 14 '12 at 13:34

João Paulo Macedo · Accepted Answer · 2012-07-14T13:49:11.543

1

You were doing it almost right. Here's your fixed fiddle http://jsfiddle.net/joplomacedo/cDD7m/4/

The thing is, you need an element with display: table wrapping one with display: table-cell for the table-cell to behave like it's supposed to.

edited Jul 14 '12 at 13:49

answered Jul 14 '12 at 13:44

score 0 · Answer 2 · answered Jul 14 '12 at 13:42

0

Will background image technique fit your needs?

background: url(my-image.jpg) center center no-repeat;

answered Jul 14 '12 at 13:42

skovalyov

2 Answers2