Question

所以我试图在页面调整大小时保持div居中。像这样的https://accounts.spotify.com/en/login

但是当我调整大小时，它会调整整个div的大小。这是相关的代码：

<div id = "wrapper">
    <div id = "formwrap">
        <form action = "./PHP/main_login.php" method = "post">
            <input type = "text" name = "email" id = "email" placeholder = "Email"/><br>
            <input type = "password" name = "password" id = "password" placeholder = "Password"/><br>
            <input type = "submit" name = "submitlogin" id = "submitbut" value = "Login">
        </form>
    </div>
</div>

#wrapper{
    padding-left: 30%;
    padding-right: 30%;
    float: center;
}

#formwrap{
    width:100%;
    background-color: #383838;
    float: center;
    margin: 0 auto;
}

基本上我正在尝试保持div和其中的内容大小相同，同时减小水平屏幕大小，直到我调用媒体查询。所有人都非常感谢

Answer 1

将其放在包含text-align:center的容器div中，并为其添加display:inline-block：

<div style="text-align:center;">
    <div style="display:inline-block;">


    </div>
</div>

然后你的div将位于页面的中心，并且通过调整大小但不改变其内容或宽度来改变它。

以下是DEMO

Answer 2

尝试这样的事情：https://jsfiddle.net/ogs0mfmn/

#wrapper{
 margin-left: auto;
 margin-right: auto;
}

#formwrap{
 margin-left: 50%;
 margin-right: 50%;
 background-color: #383838;
}

Answer 3

为#formwrapper设置宽度并为其指定margin: 0 auto

#wrapper{
    padding-left: 30%;
    padding-right: 30%;
    float: center; background-color: blue
    height: 100vh; width: 40%;
}

#formwrap{
    width:200px;
    background-color: #383838;
    margin: 0 auto;
}

Check fiddle

调整大小时将div保持在页面中心

3 个答案: