如何将div垂直居中对齐？

Question

有没有一种方法可以仅在CSS用法中使div在浏览器的中心垂直对齐？

Answer 1

Here's one way to do it: 这是一种实现方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html {
                display: table;
                width: 100%;
                height: 100%
            }
            body {
                display: table-row;
                margin: 0;
                height: 100%
            }
            #foo {
                display: table-cell;
                height: 100%;
                vertical-align: middle
            }
            #test {
                margin: auto;
                background-color: #ccc
            }
        </style>
    </head>
    <body>
        <div id="foo">
            <div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        </div>
    </body>
</html>

如何将div垂直居中对齐？

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-09-27 17:18:27

如何将div垂直居中对齐？

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-09-27 17:18:27

解决方案1
1 已采纳 2011-09-27 17:18:27