Question

为什么尝试在视口（或包装器）的中心垂直或水平（或两者）对齐某些东西是如此痛苦？

我已经尝试了过去一小时内可以找到的所有内容，从W3Schools到S / O到MSDN等网站 - 我只是不知道该怎么做。必须有一个简单的方法来做到这一点。为什么你可以像这样水平居中DIV：margin：0 auto;但不垂直？为什么你不能对页面上的任何其他元素使用相同的方法？

我有一个单行句子（见证），我想垂直和水平居中，我该怎么做？

Answer 1

Roger Johansson在这里写了一篇有趣的文章：http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/

这是它的要点：

<body>
    <div id="body">
        Content goes here
    </div>
</body>

用这个css：

html, body { width:100%; height:100%; }
html { display:table; }
body {display:table-cell; vertical-align:middle; }
#body { max-width:50em; margin:0 auto; }

Answer 2

这将水平和垂直居中，适用于所有浏览器，包括IE怪癖模式。

div{
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px; /* Negative half the width*/
    margin-top:-100px; /* Negative half the height */
}

检查http://jsfiddle.net/Nt5PU/

处的工作示例

Answer 3

要使文本行居中，请将其CSS line-height属性设置为与包含该文本的块相同的高度。

Answer 4

嘿，它是痛苦的，是的。它的愚蠢，HTML默认情况下没有内置这些东西，甚至在HTML5中也必须使用相同的黑客。但尝试这些解决方案，您将不会后悔重新发明所有内容http://intensivstation.ch/en/templates/

垂直（和水平）居中

4 个答案:

检查http://jsfiddle.net/Nt5PU/