Why Centering with Margin 0 Auto Works with Display:Block But Does Not Work with Display:Inline-Block

Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

My understanding is as follows (though I am happy to be corrected).

Inline elements do not have a width property, and so the "auto" cannot be calculated.
Block elements have a width property, so the width of the "auto" can be calculated.
Inline-block elements have an outside which acts inline, but an inside which acts like a block. As such, the width set acts more like the width of a word in an inline element.

`margin:auto;` doesn't work on inline-block elements

It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div.

#container {    border: 1px solid black;    display: inline-block;    padding: 50px;}.MtopBig {    margin: 75px auto;    position: relative;}.center {    text-align: center;}

<div class="center">    <div class="MtopBig" id="container"></div></div>

div with display:inline-block margin 0 auto not center

display:table; would position it in center too:

CSS:

  .button{
    display: table;
    margin: 0 auto;
    }

HTML:

<div class="button">
<input id="abc" type="button" value="button" />
< /div>

Note: Using inline styles is a bad practice.

margin: 0 auto not working even with display: block

Initial Problem

You need to specify a width on your #listapost element, otherwise the width of that and your #heart elements are identical, and it's already in the middle.

#heart{width:100%}
#post{width:50px;float:left;text-align:left;padding:5px;margin:1px;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#605f5f;background-color:#f7f6f6;}
#listapost{margin:0 auto; width: 220px;}

<div id="heart">     <div id="listapost">       <div id="post">stuff</div>       <div id="post">stuff</div>       <div id="post">stuff</div>       ....     </div></div>

Can't properly center things, and margin: 0 auto/margin:auto isn't working

It's because your box-sizing is content-box (the width of the element is calculated without adding the margin/padding/border).

To fix your problem, a simple way is to use border-box and apply it to all elements

* {
 box-sizing: border-box;
}

* { box-sizing: border-box;}.divvy {  position: absolute;  left: 50%;  top: 50%;  margin: -100px 0 0 -150px;}
#inputBox {  clear: both;  background-color: rgba( 0, 0, 0, 0);  border-color: rgba(0, 0, 0, 0);  color: #dbdbdb;  font-weight: bold;  width: 12em;  padding-left: 0.2em;  text-align: left;}
#title {  color: white;}
#formy {  color: #c6c6c6;  background-color: #727272;  background-color: rgba( 0, 0, 0, 0.5);  border-radius: 1.2em;  text-align: center;  padding: 0.35em 1.25em 0.75em 0.75em;  border: 0.1em solid;  border-color: #727272;  border-color: rgba(0, 0, 0, 0.3);  width: 100%;}

<div class="divvy" ng-repeat="slider in main.products">  <div>    <h3 align="center" id="title">TitleTitleTitle</h3>    <h4 align="center">Subtitle Subtitle Subtitle</h4>  </div>  <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>    <fieldset id="formy">      Name: <input id="inputBox" type="text" class="hvr-underline-reveal" required><br> Email: <input id="inputBox" type="text" required><br> Tourist <input type="radio" name="livingStatus" value="Tourist"> Resident <input type="radio" name="livingStatus"        value="Resident">    </fieldset>    <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">  </form></div>

Why margin:0 auto is not aligning to center

In short: It depends on the position, width and display attributes of elements.
Try putting position: relative; to them and also set their width.

Child divs always have a 100% width which makes centering useless, so defining width and position makes use of it. Also, you can't use display: inline-block, but display: block.

EDIT

Here is the code sample of your div using margin: auto: http://jsfiddle.net/vnAvk/

And here is with the inside elements also centerer (I think that's what you're after): http://jsfiddle.net/vnAvk/1/

And here's with the whole thing centered: http://jsfiddle.net/vnAvk/2/

Using Margin: auto; is not centering div

Okay, the way I fixed it is by changing the HTML and CSS

From <div class="col-md-3 sub admin"> to <div class="col-sm-3 admin"> I'm not totally sure if that contributed, but ¯_(ツ)_/¯

Then I changed the CSS to

.users {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;

}

.admin {
    max-width: 410px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px; 
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    box-shadow: 2px 2px 1px grey;
    background: white;
    background: -webkit-linear-gradient(#fff , #F1F1F1);
    background: -o-linear-gradient(#fff , #F1F1F1);
    background: -moz-linear-gradient(#fff , #F1F1F1);
    background: linear-gradient(#fff , #F1F1F1);
}

The only problems are that it looks a bit funky on tablet sized screens, and that it's not totally centralised. However, it works for now.

Why can't I center with margin: 0 auto?

You need to define the width of the element you are centering, not the parent element.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Edit: Ok, I've seen the testpage now, and here is how I think you want it:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

Why do we need display block to center a button

inline/inline-block elements can't have auto value for margin.

If you want to center button without making it a block, you can use text-align: center on it's parent.

Also, button don't have to be a block if it's being centered by a flex/grid parent.

I added a few examples below.

.wrapper-center {  padding: 20px;  border: 1px solid blue;  text-align: center;}
/* ----- */
.wrapper {  padding: 20px;   margin-top: 20px;  border: 1px solid red;}
.centered-button {  display: block;  margin: 0 auto;}
/* ----- */
.flex-wrapper {  display: flex;  align-items: center;  justify-content: center;  margin-top: 20px;  padding: 20px;   border: 1px solid green;}

<div class="wrapper-center">  <button>Test</button></div>
<div class="wrapper">  <button class="centered-button">Test</button></div>
<div class="flex-wrapper">  <button>Test</button></div>

Why Centering with Margin 0 Auto Works with Display:Block But Does Not Work with Display:Inline-Block