260

I know that setting margin: 0 auto; on an element is used to centre it (left-right). However, I know that the element and its parent must meet certain criteria for the auto margin to work, and I can never seem to get the magic right.

So my question is simple: what CSS properties have to be set on an element and its parent in order for margin: 0 auto; to left-right centre the child?

Chowlett
  • 45,935
  • 20
  • 116
  • 150
  • this never seems to work properly for me in IE... so I'm curious about this too. – mpen Feb 10 '11 at 09:08
  • 5
    @Mark: IE will handle `margin: 0 auto;` correctly only in standards mode so you need a doctype (as if one wasn't needed before). – BoltClock Feb 10 '11 at 09:11

11 Answers11

381

Off the top of my head:

  1. The element must be block-level, e.g. display: block or display: table
  2. The element must not float
  3. The element must not have a fixed or absolute position1

Off the top of other people's heads:

  1. The element must have a width that is not auto2

Note that all of these conditions must be true of the element being centered for it to work.

1 There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it will center with auto margins.

2 Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 6
    add the fixed width and you got the perfect answer – meo Feb 10 '11 at 09:15
  • I miss the `ol start` attribute (and it's not possible to pull off in Markdown) :( – BoltClock Feb 10 '11 at 09:28
  • Cheers, that does seem to work. It's still hard to make the `li`s of a `ul` spread across it evenly, though, but I guess that's a different kettle of fish. – Chowlett Feb 10 '11 at 12:31
  • This is bull. I have an absolutely positioned element with margin:auto that is centered. I set position:absolute;left:0;right:0;bottom:0;top:0;margin:auto; and it gets centered. Here's the snag, if the element to be centered is an img or canvas, for example, then this works with simply having HTML width/height attributes set. However, if it's a DIV, then HTML width/height are insufficient, and you must have CSS width/height set. Extremely bizarre and inconsistent behavior. http://stackoverflow.com/q/31928807/88409 – Triynko Aug 10 '15 at 20:53
  • 1
    @Triynko: Neither the question nor my answer ever said anything about HTML presentational attributes (the question isn't even tagged [html]!), so I'm not sure what exactly you're calling bull on. Anyway, while every element that can be targeted with CSS can have the CSS width and height properties, not all HTML elements can have the corresponding presentational attributes, and the reason for that is simply that it doesn't make sense to have them on certain HTML elements. – BoltClock Aug 11 '15 at 05:47
  • @Triynko: So I came back to your comment, and I finally realized you're probably calling bull on the note about absolutely positioned elements. [I do stand corrected on that](http://stackoverflow.com/questions/29261595/why-does-position-absolute-left-0-right-0-width-xypx-margin-0-auto-ac/29261847#29261847) (half a year before your comment, oddly enough), and have edited my answer. Remember that this was off the top of my head at the time... – BoltClock Apr 28 '17 at 08:54
  • you could use ```width: fit-content;``` after you set ```margin: auto;``` – Piyush Jun 06 '20 at 18:12
  • Thanks. The "element must be block-level" always confuses me. – DexieTheSheep May 21 '22 at 21:48
25

Off the top of my head, it needs a width. You need to specify the width of the container you are centering (not the parent width).

Russell Dias
  • 70,980
  • 5
  • 54
  • 71
15

Complete rule for CSS:

  1. (display: block AND width not auto) OR display: table
  2. float: none
  3. position: relative OR position: static

OR

  1. parent element with display: flex
Luca C.
  • 11,714
  • 1
  • 86
  • 77
8

Off the top of my cat's head, make sure the div you're trying to center is not set to width: 100%.

If it is, then the rules set on the child divs are what will matter.

Sam Malayek
  • 3,595
  • 3
  • 30
  • 46
4

Off the top of my head, if the element is not a block element - make it so.

and then give it a width.

Barrie Reader
  • 10,647
  • 11
  • 71
  • 139
2

It will also work with display:table - a useful display property in this case because it doesn't require a width to be set. (I know this post is 5 years old, but it's still relevant to passers-by ;)

j1mm1nycr1cket
  • 33
  • 5
2

Here is my Suggestion:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;
Anirban Bhui
  • 6,373
  • 1
  • 11
  • 15
1

It's perhaps interesting that you do not have to specify width for a <button> element to make it work - just make sure it has display:block : http://jsfiddle.net/muhuyttr/

qbolec
  • 5,374
  • 2
  • 35
  • 44
1

Please go to this quick example I've created jsFiddle. Hopefull it's easy to understand. You can use a wrapper div with the width of the site to center align. The reason you must put width is that so browser knows you are not going for a liquid layout.

Dev
  • 781
  • 9
  • 29
1

In case you don't have a fixed width for your parent element, having your parent element with display: flex worked for me.

Milan Muhammed
  • 149
  • 1
  • 5
-1

For anybody just now hitting this question, and not being able to fix margin: 0 auto, here's something I discovered you may find useful: a table element with no specified width must have display: table and not display: block in order for margin: auto to do work. This may be obvious to some, as the combination of display: block and the default width value will give a table which expands to fill its container, but if you want the table to take it's "natural" width and be centered, you need display: table

samson
  • 1,152
  • 11
  • 23
  • [That isn't true.](https://jsbin.com/cetivobaji/1/edit?html,css,output) (Although if you *just* give it `display: block` then it won't meet condition 4 of the accepted answer) – Quentin Jan 20 '20 at 20:02
  • @Quentin thanks for the heads up. In my case, I _didn't_ want the table to fill the horizontal space (which would seem to obviate the whole discussion about `margin: 0 auto`) and I also _couldn't_ specify the width of the table, as its contents could have different widths. In this case, the only solution that works (i.e. renders the table the normal way but centers it) is _no_ width rule, `display: table` and `margin: 0 auto` – samson Jan 23 '20 at 19:44