Div稍微偏离中心

Question

我试图在屏幕上将div水平和垂直居中，但不知何故它略微偏离中心。这是为什么？我认为这是因为内容，但我不知道：D

我用过

height:90%;

和

margin-top:5%

以它为中心。

这是完整的代码： http://jsfiddle.net/7mNue/1/

Answer 1

应用margin: auto并在width上设置完整尺寸（height＆amp; DIV）。

Answer 2

http://jsfiddle.net/j8tBw/

稍微清理了标记，并在父display: flex中应用DIV.container（请参阅下面的链接，特别是），并使用center flex CSS属性。

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

.inlineflex {
    display: inline-flex;
}

您可能在IE10及以下版本中遇到问题，其他浏览器也不错（请参阅caniuse链接）

参考文献：

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

http://caniuse.com/flexbox

Answer 3

试试这个

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

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

Answer 4

对于具有边距和填充的项目，

box-sizing: border-box应该对其进行排序