() translation by (you can also view the original English article)
Onlangs publiceerde Chris Coyier een beslisboom op zijn blog CSS Tricks waarin hij een aantal manieren demonstreert om dingen horizontaal en verticaal te centreren met CSS. De inidividuele oplossingen hebben allemaal zo hun valkuilen, maar gecombineerd zijn ze een geweldige centrering tool, die bovendien cross-browser (én vanaf IE8 en hoger) werkt.
Dit is hoe het werkt.
De bouwstenen
Als je een responsive site maakt, zul je waarschijnlijk je elementen layouten met percentages, dus laten we beginnen met een arbitrair .container element:
1 |
<div class="container"> |
2 |
... |
3 |
</div>
|
1 |
.container { |
2 |
width: 70%; |
3 |
height: 70%; |
4 |
margin: 40px auto; |
5 |
background: red; |
6 |
}
|
Om er zeker van te zijn dat onze container goed uitrekt, zetten we html, body { width: 100%; height: 100%; }.
De rollen omgedraaid (╯°□°）╯︵ ┻━┻)
Nu, in die .container, gaan we de boel verticaal centreren middels het gangbare table design patroon. Deze aanpak neemt een normaal block level element en zorgt ervoor dat het zich gedraagt als een tabelcel, waardoor we verticale centrering krijgen.
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
... |
5 |
</div>
|
6 |
</div>
|
7 |
</div>
|
1 |
.outer { |
2 |
display: table; |
3 |
width: 100%; |
4 |
height: 100%; |
5 |
}
|
6 |
.inner { |
7 |
display: table-cell; |
8 |
vertical-align: middle; |
9 |
text-align: center; |
10 |
}
|
Nu voegen we een horizontaal gecentreerd element toe:
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
<div class="centered"> |
5 |
... |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
1 |
.centered { |
2 |
position: relative; |
3 |
display: inline-block; |
4 |
|
5 |
width: 50%; |
6 |
padding: 1em; |
7 |
background: orange; |
8 |
color: white; |
9 |
}
|
Daarbinnen kun je alles stoppen wat je maar wil, zelfs blokken tekst met een dynamische hoogte, of absoluut gepositioneerde elementen.
Variaties
Om de horizontale uitlijning van het element te veranderen, verander je .inner's text-align eigenschap. Om de verticale uitlijning te veranderen, verander je .inner's vertical-align eigenschap.
Conclusie
Het lijkt een boel markup in dit voorbeeld, maar het karwei gebeurt in slechts drie divs: .outer, .inner, and.centered.
Het is maar één element meer dan we gewend zijn van de meeste CSS centreer-technieken, en volledig bulletproof. Ik hoop dat dit de standaard aanpak van centreren wordt en dat we eindelijk verlost zijn van de frustraties van het centreren in CSS.
