Есть несколько способов установить блочный элемент по центру родительского блока. Чтобы установить текст по центру, достаточно прописать родителю text-align:center; Блок по центру удается разместить в центре родителя с помощью значения margin: *px auto;, но как же быть, если блоков в родителе несколько.
Есть очень хороший способ установить блоки(именно блочные элементы div, p, li...) по центру. Нам поможет опять же text-align:center;
.few{ width: 100%; background: rgb(223, 223, 223); padding: 20px; text-align: center; /* установить строчный элемент по центру родительского блока */ } .few div{ display: inline-block; /* превращаем блочный элемент в строчный */ width: 120px; background: rgb(112, 112, 112); } <div class="few"> <div>один</div> <div>два</div> <div>три</div> <div>четыре</div> </div>
Смотреть демоИдея заключается в следующем, блочные элементы, находящиеся в родителе, превращаем в строчные элементы с помощью display: inline-block;, в то же время родителю указываем text-align: center;. Это очень часто приходится использовать для верстки меню, чтобы при добавлении еще одного пункта наше меню плавало и устанавливала пункты по центру.