Jak wyśrodkować element div w poziomie w nadrzędnym div

114

Jak wyśrodkować divpoziomo wewnątrz jego rodzica divz CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
html css Orzeł
źródło
1
Oto dwie proste metody wyśrodkowania elementów div w elementach div, w pionie, poziomie lub w obu (czysty CSS): stackoverflow.com/a/31977476/3597276
Michael Benjamin

Odpowiedzi:

158

Zakładam, że nadrzędny element DIV nie ma szerokości ani dużej szerokości, a element podrzędny ma mniejszą szerokość. Poniższe instrukcje ustawią marginesy na górze i na dole na zero, a boki tak, aby pasowały automatycznie. To skupia div.

div#child {
    margin: 0 auto;
}
Mark Embling
źródło
@Znak. Czy wiesz, jak sprawić, by działał w IE6? IE6 naprawdę jest do bani, ale nadal niektórzy z niego korzystają.
Bakhtiyor,
@Bakhtiyor: o ile pamiętam, tak. Jakie problemy widzisz? możesz otworzyć nowe pytanie, jeśli masz jakiś konkretny problem, który nie został wcześniej poruszony. Nie mam jednak dostępu do IE6, żeby to sprawdzić.
Mark Embling,
3
@Bakhtiyor: faktycznie konieczności myślenia o tym, myślę, że w IE.old trzeba także zestaw text-align: center;na parentdiv, a następnie ustawić go z powrotem do lewej (lub cokolwiek) do childjednego. Nie jestem pewien, czy ten problem dotyczy IE6 ...
Mark Embling,
@Mark & ​​@Bakhtiyor z jakiegoś powodu moje childdiv pozornie przesunięte w lewo - w porównaniu do przeglądarek, które są bardziej zgodne ze standardami - we wszystkich wersjach IE, które sprawdziłem (IE6-8). I text-align: center;dla parenti text-align: left;dla childnaprawiono to dla wszystkich tych wersji.
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>
James Goodwin
źródło
2
To rozwiązanie obsługuje IE 6, ale nie zapomnij dodać text-align:left;do div
#child
1
text-align:centerdo elementu DIV dziecka czy DIV nadrzędnego?
Anish Nair
6

Po prostu z ciekawości, jeśli chcesz wyśrodkować dwa lub więcej elementów div (tak, aby znajdowały się obok siebie w środku), oto jak to zrobić: 

<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>
Paul Chris Jones
źródło
4

Możesz użyć wartości „auto” dla lewego i prawego marginesu, aby przeglądarka rozdzieliła dostępne miejsce równomiernie po obu stronach wewnętrznego elementu 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
źródło
2 
<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>
Soufiane Hassou
źródło