Question

我正在尝试在HTML5中创建由div组成的视图，该视图显示在页面中央，而背景显示为灰色。就像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;将无效！

如何在屏幕中央浮动div

2 个答案: