Issue getting a submit button to center in a wrap - html

Question

For some reason I cannot get the submit button to center. I have tried everything from text-align: center; to margin: 0 auto; to a left and right margin at auto. The button will not center anyway I try. What am I failing to do?
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>

Answer 1

It's hard to center is, because it is inside a label. The label is an inline element too and will size around the button. Therefor text-align: center and other solutions don't work.
In the snippet below, I've made the label show itself as a block element, which automatically occupies the available width of the parent. Then you can easily center the button inside it:
The added piece:
label[for="contactButton"] {
display: block;
text-align: center;
}
The whole code:
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
/* Make sure the button isn't too wide on small screens */
max-width: 80%;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
label[for="contactButton"] {
display: block;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>

Answer 2

Use text-align:center on the parent div.
Fiddle: http://jsfiddle.net/gopal/su3vg018/
.contactForm {
text-align:center;
}

Answer 3

Add this to your css file:
.contactForm label[for="contactButton"] {
display: block;
text-align: center;
}