css - 如何在屏幕中央浮动一个 div

Question

我正在尝试在 HTML5 中创建一个由div's 组成的视图，该视图显示在页面中心，而背景显示为灰色。类似于 Silverlight 子窗口的东西。我很难让它发挥作用。

Answer 1

您可以使用一些基本的 css 轻松地做到这一点。这只是 css 部分而不是 javascript 动画或切换。但这应该足以让您入门。

CSS

.div {
    position:absolute;
    top:300px;
    width:300px;
    height:260px;
    left:50%;
    z-index:1000;
    margin-left: -150px; /* negative half the width of the div */
}

.background {
    background:#000;
    opacity:0.5;
    position:fixed:
    width:100%;
    height:100%;
    z-index:999;
}

HTML

<div class="div">
   My Content
</div>
<div class="background "></div>

Answer 2

这是为了使页面以 900px 宽度为中心，您将其添加到您的div元素中：

 width:900px;margin-right:auto;margin-left:auto;

对于背景，您需要将以下样式添加到您的body元素

 color:gray;padding:0px;margin:0px;

---

您必须包含宽度才能使元素居中。margin-right:auto; margin-left:auto;如果您没有包含宽度，将无法工作！