Question

我想在屏幕的几何中心设置div块的宝石中心。我怎么能这样做？我们有

<div style="position: absolute; width: 240px; height: 150px; margin:50%; >
    some content
</div>

但它不起作用。我不明白为什么它没有。 margin:50%相当于margin-top/left/right/bottom: 50%。因此，我们将div元素的额外空间设置为线性屏幕大小的50%。如果我们使用width属性或height属性，为什么必须明确定义margin和top/left/right/bottom？

Answer 1

我们走了。 HTML：

<body>
    <div class="centered">Hello</div>
</body>

CSS：

.centered {
    position: absolute;
    width: 240px; 
    height: 150px;
    /* positioning the element (top/left corner) at the center */
    top: 50%;
    left: 50%;
    /* moving the element's center to the screen's center (compensating relatively to the dimensions) */
    margin-top: -75px; /* half of the height */
    margin-left: -120px; /* half of the width */
}

margin: 50%无效，因为position: absolute的元素会丢失对父级维度的引用。这是CSS Box模型的各种布局问题之一。

但是，您可以使用Flexbox布局模型，这将更容易批次：

body {
    display: flex;
}

.centered {
    margin: auto;
}

您只需要设置margin: auto，并且必须将父元素设置为display: flex。简单=）

Answer 2

使用以下内容使其集中化。

对于实例，

<div style="display: table; margin: 0px auto;">
    <div style="margin: 0px auto; text-align: center; background: none repeat scroll 0% 0% gray; width: 240px; height: 150px; display: table-cell; vertical-align: middle;">
        some content
    </div>
</div>

<强> WORKING DEMO

希望这有帮助。

Answer 3

我们可以使用以下内容：

<div style="position: absolute; margin: auto; width: 240px; height: 150px; top: 0; left: 0; bottom: 0; right: 0;">
    some content
</div>

将div块相对于该中心居中

3 个答案: