When my div is not getting horizontally centered?

Question

Why is the image not centered here?

#image {
  margin: 0 auto;
}

<div id="image">
  <img src="https://placekitten.com/200/300">
</div>

But it works perfect with a <center> tag.

My fiddle

Possible duplicate of [Center image in div horizontally](http://stackoverflow.com/questions/9980531/center-image-in-div-horizontally) — Peter VARGA, Aug 03 '16 at 14:37
Possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) and a multitude of similar answers found by searching SO. — Rob, Aug 03 '16 at 14:37

Nick Bull · Answer 1 · 2016-08-03T14:39:10.793

JSFiddle here. Your <div> needs to be 100% in width, and the image has to be a block element; try this CSS:

#image {
    width: 100%;
}
#image img {
    margin: 0 auto;
    display: block;
}

Alternatively:

#image {
    width: 100%;
    text-align: center;
}

This will center <img> tags, as they have display: inline-block; by default. Only display: block elements can be centered using margin: 0 auto;.

Quick summary:

Horizontally center block displayed elements using margin: 0 auto; on the element, to center relative to the parent element's width;
Horizontally center inline-block displayed elements using text-align: center; on the parent element, to center relative to the parent element's width.

score 0 · Answer 2 · answered Aug 03 '16 at 14:34

0

Since an image is not a block element, it's enough just to add text-align: center; to its parent.

#image{
  text-align: center;
}

answered Aug 03 '16 at 14:34

Mila

598
4
9

score 0 · Answer 3 · answered Aug 03 '16 at 14:36

You can use text-align:center;

#image{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  
     }

<div id="image">
     <img src="https://scontent-kul.xx.fbcdn.net/v/t1.0-0/s526x395/13934860_132991530474366_7559506120027031422_n.jpg?oh=54eb36c2f2b2383712a6dcf1da2cd638&oe=58212A26">
     </div>

score 0 · Accepted Answer · answered Aug 03 '16 at 14:42

Or you could just use flexbox

#image {
  height: 90vh;
  width: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

You don't need the 90vh or 90vw but you do need to give the height and width some value. Whether it's in px or % is up to you.

When my div is not getting horizontally centered?

4 Answers4