Center an image horizontally using CSS

Question

I am trying to center a image horizontally using css.

I am displaying my image on the screen with the following HTML code:

Answer 1

You can use different method:

Method 1:

Its a simple method, use "text-align: center;" for your parent div.

#loading {
  text-align: center;
}

FIDDLE

Method 2:

Please check the code:

#loading img {
  margin: 0 auto;
  display: block;
  float: none; 
  /*width: 200px; if its a large image, it need a width for align center*/
}

FIDDLE

Method 3:

Using "display: flex;"

#loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

FIDDLE

Method 4:

You can use "position: absolute;",

#loading {
        position: relative;
        }
#loading img{
        position: absolute;
        top: 0;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
}

FIDDLE

Hope this will help you.