Your form is a flex container and flex can be horizontally center with justify-content: center; and vertically with align-items: center (If height is enough available)
Add below css and this will center the form
.form-inline {
justify-content: center;
}
Solution 2 :
If you are using bootstrap and the i would suggest using it strictly. Surround your form within Container, row, col. If you want to give padding or margin, use bootstrap classes.
In this case:
<div class="container">
<div class="row justify-content-center">
Your Form goes here
</div>
</div>
Have a look here: https://getbootstrap.com/docs/4.4/layout/grid/
Solution 3 :
in your "form-inline" display is set to "flex" so you can add "justify-content:center;" to its css code or you can add "justify-content-center" to “class” attribute in your html.
Solution 4 :
add this class inside the container class
<div class="row justify-content-center">
Your Form
</div>
OR
<div class="row text-center">
Your Form
</div>
Solution 5 :
Usually the parent element prevent the element to get aligned as desired. It limits not only center but float as well.I tried to explain this in the following image.
Please inspect the width of the parent element.Hope you will find this helpful.
Solution 6 :
Obviously you are using Bootstrap so try this :
<div class="container"> <div class="row justify-content-center"> Your Form </div> </div>
<div class="jumbotron">
<h1 class="display-4">My Awesome App</h1>
<p class="lead">This is why you should download this fantastic app!</p>
<p>Want to know more?</p>
<p>Join our mailing list!</p>
<hr>
<form class="form-inline" id="jumbo-form">
<div class="form-group mx-sm-3 mb-2">
<input type="password" class="form-control" id="email" placeholder="Email">
</div>
<button type="submit" class="btn btn-primary mb-2">Sign Up Now</button>
</form>
</div>
In the class of jumbotron, all content before the form is centered. However, the form is align left. I tried the solutions from other questions like adding absolute position and then margin:auto but still not working.
Comments
Comment posted by Alfred Chow
Thanks! It is a good suggestion. I should make better use of the grid system.
Comment posted by tahmina
your welcom. if you find it useful you should choose an answer and clarify that the question is solved.