Question

我无法让我的表格垂直和水平对齐。

我不介意这不支持IE - 我计划实施IE检测脚本以告诉用户使用其他浏览器 - 但必须支持Firefox和Chrome。

以下是我目前的情况：

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="global.css">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="wrapper">
        <div id="logo_div">
            <img src="../images/logo.png" id="logo">
        </div>

        <div id="login">
            <form name="searchform" action="checklogin.php" method="post" id="login_form">
            <br>
                User Name : <input type="text" name="myusername" size="16" /><br>
                Password : <input type="password" name="mypassword" /><br>
                <input type="submit" value="Login" /><br>
            </form>
        </div>
    </div>
    </div>
</body>
</html>

全局CSS

#wrapper {
    position: relative;
    max-width: 1024px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#logo_div {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

索引CSS

#login {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#login_form {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

感谢任何帮助。感谢

Answer 1

你想要这样的东西吗？

试试这个css

#login{
    position:absolute;
    left:50%;
    top:50%;

    margin-left:-120px;
    margin-top:-60px;

    border:1px solid #ccc;
    width:240px;
    height:120px;
}

如果希望表格垂直和水平居中，可以使用css属性position：absolute;然后使用左：50％; top：50％将div的左上角与浏览器的中心对齐。但是你的Div不会以此为中心。因为它的左上角是窗口的中心。我只使用负边距，div的宽度和高度的一半正确居中。

希望这就是你要找的东西。

感谢Bojangles，提出建议！

Answer 2

现在你的#login div使用100％的页面宽度，你需要设置一个较小的宽度，以便它可以正确居中。您可以通过将顶部设置为50％减去div高度/ 2来垂直居中。

喜欢这个

#login
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    top: 50%;
    margin-top:-50px;
}

在CSS中垂直和水平对齐

2 个答案: