Как центрировать горизонтальный div внутри родительского div

Как центрировать div по горизонтали внутри родительского div с помощью CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

Ответ 1

Я предполагаю, что родительский div не имеет ширины или ширины, а дочерний div имеет меньшую ширину. Следующее задает значение поля для верхнего и нижнего ноля, а стороны - автоматически. Это центрирует div.

div#child {
    margin: 0 auto;
}

Ответ 2

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

Ответ 3

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

Ответ 4

Вы можете использовать значение "auto" для левого и правого полей, чтобы браузер распределял доступное пространство одинаково по обеим сторонам внутреннего div:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

Ответ 5

Просто из интереса, если вы хотите центрировать два или более div (так что они бок о бок в центре), то вот как это сделать:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>