Solution 1 :

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

Have a look here:

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 class="row text-center">
     Your Form

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.
Common issue while aligning content to the center

Solution 6 :

Obviously you are using Bootstrap so try this :

<div class="container"> <div class="row justify-content-center"> Your Form  </div> </div>

Have a look here:

Or use css as following:


Problem :

.jumbotron {
  background-image: url(background.jpg);
  color: white;
  text-align: center;
<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>
  <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">
    <button type="submit" class="btn btn-primary mb-2">Sign Up Now</button>

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.


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.