Как я могу центрировать кнопки внутри DIV, чтобы было одинаковое пространство справа и слева от четырех кнопок?

если вы хотите, чтобы все кнопки были центрированы в середине вашего div а остальная часть вашего свободного места была разделена между левым и правым, используйте text-align:center на контейнере.

------ ** ** ** ** ------

но если вы хотите, чтобы все свободное пространство было разделено поровну между краем элементов, используйте небольшой трюк, включающий text-align:justify и некоторые псевдоэлементы.

У меня есть два способа разделения пространства.

1) ** --- ** --- ** --- **

2) -- ** -- ** -- ** -- ** --    //I think this has the best visual output

вы можете увидеть разницу и реализации в этой скрипке

margin: auto; даст вам горизонтальное и вертикальное центрирование, если элемент также имеет определенную ширину (для горизонтали) и высоту (для вертикали).

Пример: http://jsfiddle.net/vQJ3L/

Обновление: другой подход - использовать CSS3 calc для центрирования элемента. Преимущество этого заключается в том, чтобы быть отзывчивым:

http://jsfiddle.net/vQJ3L/3/

Добавьте этот CSS:

.clearfix{
    width:500px;
    text-align:center;}

Обратитесь к скрипке здесь: http://jsfiddle.net/aasthatuteja/V6fxp/

Согласно вашему HTML:

button {
    display: inline-block;
}

div {
    text-align: center;
}

Но я бы посоветовал вам добавить некоторые классы здесь, это не очень хорошая идея, чтобы иметь дело с такими селекторами для такого специфического стиля.

Подобно этому с CSS:

.clearfix > div {
  text-align: center;
}
.clearfix button {
  display: inline-block; // this should be the default state, so it is probably not needed
}

Еще одна вещь, вы должны убедиться, что div внутри .clearfix имеет ширину. Иначе туда нечего сосредоточиться.

Вы можете использовать display: inline-block и text-align: center.

.clearfix > div{
    text-align: center;
}

button{
    display: inline-block;
}

Вы имеете в виду нечто похожее на это: http://jsfiddle.net/lee_gladding/YEptp/

.clearfix > div {
  text-align: center;
}


 <div class="clearfix">
                    <div>
                        <button>a</button>
                        <button>a</button>
                        <button>a</button>
                        <button>a</button>
                    </div>
                </div>

Надеюсь, это вам поможет.