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

114

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

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

html css

— орел
источник

1

Вот два простых метода центрирования div внутри div: по вертикали, горизонтали или по обоим направлениям (чистый CSS): stackoverflow.com/a/31977476/3597276

— Майкл Бенджамин,

158

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

div#child {
    margin: 0 auto;
}

— Марк Эмблинг
источник

@Отметка. Вы знаете, как заставить его работать в IE6? IE6 действительно отстой, но все же некоторые люди его используют.

— Бахтиёр

@Bakhtiyor: насколько я помню, есть. Какие проблемы вы видите? вы можете открыть новый вопрос, если у вас возникла какая-то конкретная проблема, которую раньше не затрагивали. Однако у меня нет доступа к IE6, чтобы проверить.

— Марк Эмблинг,

3

@Bakhtiyor: на самом деле, подумав об этом, я думаю , что в IE.old вы также должны установить text-align: center;на parentDIV , а затем установить его обратно влево (или любой другой ) для childодного. Не уверен, что эта проблема касается IE6 ...

— Марк Эмблинг,

@Mark & @Bakhtiyor по какой-то причине мой childdiv, казалось бы, был смещен влево - по сравнению с браузерами, которые больше соответствуют стандартам - во всех версиях IE, которые я проверял (IE6-8). И text-align: center;для parentи text-align: left;для childисправленного для всех этих версий.

— Brookmarker

8

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

— Джеймс Гудвин
источник

2

Это решение поддерживает IE 6, но не забудьте добавить text-align:left;в div

— #child

1

text-align:centerк дочернему div или родительскому div?

— Аниш Наир

6

Просто ради интереса, если вы хотите центрировать два или более 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>

— Пол Крис Джонс
источник

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>

— x4u
источник

2

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

— Суфиан Хассу
источник