How do I get this section with the form to center. The form field and button aren't centering - html

Question

I need the text to center in the middle of the section and the field and button to align under that text (with the field and button remaining side by side.) Everything is good - the field and button are currently beside each other the way it's supposed to be, but just it's all not centering properly. The text is centered but the form field and button are messed up. I have attached an image. I'm using HTML5, CSS3 and bootstrap.
<section class="more-products">
<div class="container">
<div class="row">
<div class=" col-lg-8 col-md-4 col-sm-4 prod-form">
<p class="par-headform"> TEXT</p>
<p class="para-form">
text about products
</p>
<p class="para-blue">
Sign up for the newsletter Stay informed
</p>
<form class="subscribe_group wow fadeInUp row col-m-12">
<div class=" col-md-6 col-sm-6 col-xs-5 ">
<input class="form-control subscribe_mail" type="email" placeholder="email">
</div>
<div class="col-md-5 col-sm-6 col-xs-5 " >
<input class="btn-form" type="submit" value="Subscribe">
</div>
</form>
</div>
</div>
</div>
</section>
CSS
.more-products {
padding: 60px 0;
background: #FCFCFC;
text-align: center;
}
.more-products .block {
position: relative;
z-index: 99;
}
.more-products .par-headform .block {
padding: 20px 15px;
margin-top: 0;
color: #666;
}
.prod-form .btn-form {
border: 1px solid #00bfff;
background-color: #fff;
color: #00bfff;
padding: 3% 14%;
font-weight: 500;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
border: 1px solid #00bfff;
background-color: #fff;
letter-spacing: .8px;
font-size: 120%;
display: inline-block;
}
.prod-form .btn-form: Hover{
color: #00bfff;
padding: 3% 14%;
font-weight: 500;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
border: 1px solid #00bfff;
background-color: #fff;
letter-spacing: .8px;
font-size: 120%;
display: inline-block;
}
.par-headform {
font-size: 250%;
line-height: 35px;
}
.form-control {
max-width: auto;
margin: 1px;
}

Answer 1

Try this:
<form class="subscribe_group wow fadeInUp row col-m-12">
<div class="col-lg-8 col-md-4 col-sm-4 center1">
<input class="form-control subscribe_mail" type="email" placeholder="email">
<input class="btn-form" type="submit" value="Subscribe">
</div>
</form>
I removed the DIV tags around the two input elements (to have them in one wrapper), gave the parent DIV the same classes as the DIV for the texts above it and added an additional class center1, which you have to put into your CSS like
.center1 {
text-align: center;
}
The input elements need to be defined as inline-blocks, if they aren't already:
.subscribe_mail, .btn-form {
display: inline-block;
}
Since you don't have a fiddle or codepen, I can't try it, but it should work - maybe the classes in the DIV around the input tags need to be different, that depends on the rest of your code.

Answer 2

use the following css for form and div's inside the form.
form {
width: auto;
display: inline-table;
}
form > div {
margin: 0 auto;
float: left;
}
and change subscribe padding to px instead of % like below example
.prod-form .btn-form {
padding: 3px 6px;
}
UPDATE
use the following css to the section
section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
check the jsfiddle https://jsfiddle.net/s45wgw1h/1/