超高对齐按钮中心

Question

我有一个按钮，无法对准中心。我认为这与父对象设置的边距有关，但我无法找到覆盖边距的方法。我试着把它设置为0，但仍然不能使它居中。

.contact h1 { 
text-align: center; 
padding-top: 4rem;
font-size: 4vh; 
text-decoration: underline #4c6bc1; 
}
.contact-form {
display: flex;
justify-content: center;
margin: auto;
width: 60%;
}
.contact-form input, textarea {
font-family: 'Roboto', sans-serif; 
font-size: 3vh;
width: 100%;
margin: 1rem;
}
.contact-form textarea {
height: 100%;
}
.contact-form button {
margin-left: 1rem;
width: 50%;
}

<section class="contact">
<h1>Contact</h1>
<div class="contact-form">
<form action="https://formsubmit.co/[e-mail]" method="POST">
<input type="name" size="100%" name="name" placeholder="Enter your name:" required>
<input type="email" name="email" placeholder="Enter your email:" required>
<textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
<input type="hidden" name="_next" value="#">
<button type="submit">Submit</button>
</form>
</div>  
</section>

Answer 1

您可以将button元素设置为块级元素，并将auto用于水平边距：

.contact-form button {
margin: 0 auto;
display: block;
width: 50%;
}

见以下概念验证：

.contact h1 { 
text-align: center; 
padding-top: 4rem;
font-size: 4vh; 
text-decoration: underline #4c6bc1; 
}
.contact-form {
display: flex;
justify-content: center;
margin: auto;
width: 60%;
}
.contact-form input, textarea {
font-family: 'Roboto', sans-serif; 
font-size: 3vh;
width: 100%;
margin: 1rem;
}
.contact-form textarea {
height: 100%;
}
.contact-form button {
margin: 0 auto;
display: block;
width: 50%;
}

<section class="contact">
<h1>Contact</h1>
<div class="contact-form">
<form action="https://formsubmit.co/[e-mail]" method="POST">
<input type="name" size="100%" name="name" placeholder="Enter your name:" required>
<input type="email" name="email" placeholder="Enter your email:" required>
<textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
<input type="hidden" name="_next" value="#">
<button type="submit">Submit</button>
</form>
</div>  
</section>

Answer 2

.contact h1 { 
text-align: center; 
padding-top: 4rem;
font-size: 4vh; 
text-decoration: underline #4c6bc1; 
}
.contact-form {
display: flex;
justify-content: center;
margin: auto;
width: 60%;
}
.contact-form input, textarea {
font-family: 'Roboto', sans-serif; 
font-size: 3vh;
width: 100%;
margin: 1rem;
}
.contact-form textarea {
height: 100%;
}
.contact-form button {
margin: auto;
display: block;
text-align: center;
}

<section class="contact">
<h1>Contact</h1>
<div class="contact-form">
<form action="https://formsubmit.co/[e-mail]" method="POST">
<input type="name" size="100%" name="name" placeholder="Enter your name:" required>
<input type="email" name="email" placeholder="Enter your email:" required>
<textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
<input type="hidden" name="_next" value="#">
<button type="submit">Submit</button>
</form>
</div>  
</section>

Answer 3

我添加到表单flex中，然后它会影响按钮

.contact h1 { 
text-align: center; 
padding-top: 4rem;
font-size: 4vh; 
text-decoration: underline #4c6bc1; 
}
.contact-form {
display: flex;
justify-content: center;
margin: auto;
width: 60%;
}
.contact-form input, textarea {
font-family: 'Roboto', sans-serif; 
font-size: 3vh;
width: 100%;
margin: 1rem;
}
.contact-form textarea {
height: 100%;
}
.contact-form button {
margin-left: 1rem;
width: 50%;
}
form{
display:flex;
justify-content:center;
align-items:center;
flex-flow:column
}

<section class="contact">
<h1>Contact</h1>
<div class="contact-form">
<form action="https://formsubmit.co/[e-mail]" method="POST">
<input type="name" size="100%" name="name" placeholder="Enter your name:" required>
<input type="email" name="email" placeholder="Enter your email:" required>
<textarea type="text" name="text" placeholder="Enter your message:" required></textarea>
<input type="hidden" name="_next" value="#">
<button type="submit">Submit</button>
</form>
</div>  
</section>