css - Div 稍微偏离中心

Question

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

我用过

height:90%;

和

margin-top:5%

将其居中。

完整代码如下: http://jsfiddle.net/7mNue/1/

Answer 1

http://jsfiddle.net/j8tBw/

稍微清理了标记，并在父级DIV.container中应用了display: flex(特别参见下面的链接)，并使用了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