HTML center element inside div

Question

I want two styled submit buttons (xx1 and xx2) to be centered inside their div (MainDiv). I've tried several things with no success. margin: auto; or margin: 0 auto; should do the trick. Does anybody know why following code is not centering inputs inside each MainDiv?

.container{
    display:flex;
	align-items: center;
}

.MainDiv {
	height:25vh;
	background-color:transparent;
	width:50%;
	margin: 0 auto;
}
.SubmitGral {
	margin: 0 auto;
	height:90%;
	width:70%;
	border:none;
    background-color:#6c3;
	font-size:1.4em;
	white-space: normal;
	word-wrap: break-word;
    -o-transition: opacity .2s ease-in; 
    -moz-transition: opacity .2s ease-in;
    -webkit-transition: opacity .2s ease-in; 
    transition: opacity .2s ease-in; 	
}

<div class="container">
	<div class="MainDiv"><input name="Master" type="Submit" class="SubmitGral" value="XX1"></div>
	<div class="MainDiv"><input name="Master" type="Submit" class="SubmitGral" value="XX2"></div>
</div>	

---

fiddle here

Answer 1

You just have to add text-align:center to .MainDiv class and you are done.

See here

.MainDiv {
    height:25vh;
    background-color:transparent;
    width:50%;
    margin: 0 auto;
  text-align:center;
}