Question

我希望以页面为中心的登录表单。一个例子是here

我知道如何将元素居中，即使浏览器窗口改变大小，如何将元素始终置于页面中心

Answer 1

经典问题。这是一些CSS示例：

#your_element{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 400px;
    margin-left: -300px;
    margin-top: -200px;
}

重要位：负边距应为相应尺寸的一半。

Answer 2

将position: fixed;添加到其样式中。如果你知道如何居中，那么只需添加它就可以了。

请点击此处了解详情：http://www.w3.org/TR/CSS2/visuren.html#choose-position

Answer 3

我保留此模板HTML仅适用于这种情况，当我需要一个垂直和水平居中的容器时：

CSS：

    html, body {
        height: 100%;
    }

    body {
        background: #ffc;
        margin: 0;
        padding: 0;
    }

    #vertical-center {
        float: left;
        height: 50%;
        width: 100%;
        margin-top: -185px;
    }

    #content {
        background: #ffffde;
        border: 2px dashed red;
        clear: both;
        margin: 0 auto;
        padding: 10px;
        height: 350px;
        width: 500px;
    }

HTML：

<div id="vertical-center"></div>
<div id="content">
    <h1>Centered Content</h1>
    <p>This content is centered on the page.</p>
    <p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>

请注意，＃vertical-center的margin-top必须是#content div高度的一半，并且必须是负数。

将DIV作为页面上的居中焦点

3 个答案: