垂直(和水平)居中

2 html css css3

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

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

我有一个单行句子(见证),我想垂直和水平居中,我该怎么办?

Jos*_*der 5

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>
Run Code Online (Sandbox Code Playgroud)

有了这个css:

html, body { width:100%; height:100%; }
html { display:table; }
body {display:table-cell; vertical-align:middle; }
#body { max-width:50em; margin:0 auto; }
Run Code Online (Sandbox Code Playgroud)

  • 表方法导致IE 7及之前出现问题. (3认同)