在 div 中将表单居中答案

【问题标题】：Center the form in the div在 div 中将表单居中
【发布时间】：2019-07-27 21:31:59
【问题描述】：

我正在尝试将我的表单置于 Div“fromArea”的中心。但是当我使用“display:flex”、“align-content:center”时什么也没有发生。但是，当我在表单上使用“margin-left: 60px”时，我得到了中间的内容。

我尝试过：“display:flex”、“align-content: center”

HTML：

<!-- CONTENT -->
    <div class="container">

        <div class=formArea>

            <form>
                <h1>Contact us!</h1>
                <input type="text" id=firstName placeholder="First name"><br>
                <input type="text" id=lastName placeholder="Last name"><br>
                <input type="text" id=City placeholder="City"><br>
                <input type="email" id=email placeholder="Email"><br>
                <input type="phone" id=phone placeholder="Phone"><br>
                <textarea name="yourMessage" id="yourMessage" cols="" rows="" style="text-align:left; overflow:auto;"
                    placeholder="Your message"></textarea>
                <input type="submit" id=submit><br>
            </form>
        </div>

    </div>

CSS：

.formArea {
    width: 100%;
    padding-bottom: 590px;
    margin: 0 30%;
    background-color:rgba(0, 0, 0, 0.30);
    border-right: 2px solid rgba(0, 193, 177, .3);
    border-left: 2px solid rgba(0, 193, 177, .3);
    position: relative;
}

form {
    width: 75%;
    padding: 0px;
    position: absolute;
    left: 0%;
    top: 0;
    margin: 15px;
    margin-left: 60px;
}

我想在 .formArea 中居中表单而不使用“margin-left: 60px;”正如您在我的 Css 脚本（表单）中看到的那样。

【问题讨论】：

align-content 用于垂直对齐，justify-content 用于水平对齐。使用 justify-content: center 可能会做你想做的事。查看CSS-Tricks Flexbox Tutorial 了解更多信息。

标签： html css

【解决方案1】：

为了完美的中心，水平和垂直使用

.formArea {
    width: 500px;  /* whatever width  to center in */
    height: 500px; /* whatever height to center in */
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dotted red;
}
.formArea h1 {
    margin: 0 0 10px 0;
    text-align: center;
}
.formArea form {
    width: 250px; /* or in % but smaller then formArea width */
    padding: 10px;
    border: 1px dotted blue;
}
input, textarea {
    width: 100%;
    margin-bottom: 10px;
}
input#submit {
    width: 120px;
    margin-bottom: 0;
    text-align: center;
}
textarea {
    height: auto;
    overflow: scroll-y;
}

【讨论】：

【解决方案2】：

试试这个：

.formArea {
text-align: center;
}

【讨论】：

【解决方案3】：

你应该使用

left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);

对于您想要在 Div 中对齐的内部形式。或者，您可以使用

display: flex;
justify-content: center;

希望它有效。

【讨论】：

【解决方案4】：

最好在浏览器上使用 F12 或 Firebug(Addon) 来查看输入的活动更改

您可以测试的所有答案，还可以测试以下内容：

<div class=formArea> <center> your form's code <center> </div>

【讨论】：