1

我想垂直对齐一个 div ( rectangle)，这个 div 没有任何父母，我创建了一个 ( container) 来使用该vertical-align属性，但如果有人知道更好的方法，我可以将其删除。

我只想将一个矩形居中到bodydiv 中（水平和垂直）并使其响应。

这是我尝试过的，但它不起作用（矩形靠近窗口顶部）：

<html>
    <head>
        <style>
            .rectangle {
                width: 88%;
                height: 87%;
                margin: auto;
                padding:10px;
                background:red;
                display:inline-block;
                vertical-align:middle;
            }

            .container {
                text-align: center;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="rectangle">
        </div>
    </div>
    </body>
</html>

是否可以仅使用 CSS 来实现，还是我们需要 javascript？

4

2 回答 2

2

仅使用 CSS 有几种方法可以解决此问题。由于您已将其标记为 CSS3，因此我们可以使用一些更新的方法来实现此目的。此外，Chris Coyer 还写了一些关于使用 CSS 进行垂直居中的精彩文章。一些链接是：

http://css-tricks.com/centering-in-the-unknown/

http://css-tricks.com/centering-percentage-widthheight-elements/

如果您知道要居中的元素的高度，则可以绝对定位它并使用负边距来说明它的宽度/高度。

另一种方法是设置元素和正文以使用 css 显示表格。

另一个新兴选项是 flexbox 规范，它为您处理了很多繁重的工作。更多关于 flexbox 的信息可以在这里找到：

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

以及如何将 flexbox 与其他样式混合的示例：

http://css-tricks.com/replicating-google-hangouts-chat/

我个人最喜欢 translate 选项，但是随着对 flexbox 支持的增长，这种布局很可能是最简单的。

于 2013-08-02T10:34:57.883 回答
0 
<html>
    <head>
        <style>
            .rectangle {

            background: #000;
            height: 200px;
            width: 200px;
            }

            .container {
                width: 100%; /* Firefox needs this */

            height: 100%; /* Height can be anything */

            /* WebKit (Chrome & Safari) */
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;

            /* Firefox */
            display: -moz-box;
            -moz-box-pack: center;
            -moz-box-align: center;

            /* IE */
            display: -ms-box;
            -ms-box-pack: center;
            -ms-box-align: center;

            /* Native CSS */
            display: box;
            box-pack: center;
            box-align: center;

            background: red;

            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="rectangle">
        </div>
    </div>
    </body>
</html>

Internet Explorer 10 支持另一种选择，即 -ms-flex-align 属性。Firefox 支持另一种选择，即 -moz-box-align 属性。Safari、Opera 和 Chrome 支持另一种选择，即 -webkit-box-align 属性。注意：Internet Explorer 9 和更早版本不支持灵活框。

于 2013-08-02T11:06:19.107 回答