Unable to center button - html

Question

I faced a problem about getting a button to center, I tried the text-align: center, but it didn't work.
.regis-btn {
border-radius: 0px;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
}
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span> Register </span>
</button>
</form>

Answer 1

You can try this:
<div class="form-group text-center">
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;"></button>
</div>

Answer 2

text-align: center only centers the content within the element. So what you have done was to center the text within the button.
If your button is the only element in the row, wrap the button in a div instead.
I added a demo to show that it works:
.btn-container {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<div class="btn-container">
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span>Register</span>
</button>
</div>
</form>

Answer 3

Use margin: 0 auto; and display: block; for button.
.regis-btn {
border-radius: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
text-align: center;
margin: 0 auto;
display: block;
}
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span>
Register
</span>
</button>
</form>

Answer 4

Use My code that is working very well.
.regis-btn {
border-radius: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<div class="text-center">
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span> Register </span>
</button>
</div>
</form>