Div is slightly off center

Question

I tried to center a div horizontal and vertical on the screen, but somehow it is slightly off center. Why is that? I think it is because of the content, but I don't know :D

I used

height:90%;

and

margin-top:5%

to center it.

Here's the full code: http://jsfiddle.net/7mNue/1/

Answer 1

http://jsfiddle.net/j8tBw/

Cleaned up the markup a bit, and applied display: flex in a parent DIV.container (see links below, specially), and used center flex CSS properties.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.inlineflex {
    display: inline-flex;
}

You may face problems in IE10 and below, other browsers are good (see caniuse link)

References:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://caniuse.com/flexbox

Answer 2

Apply margin: auto and set a full size (width & height) on the DIV.

Answer 3

Try this

.popup{
    width:100%; // remove this and add below style
    max-width:100%;
}

.popup img{
    max-width:100%;
}

Answer 4

box-sizing: border-box on items that have margin and padding should sort it out