Saker sitter vanligtvis i mitten av webbplatser, eller hur? Och att sätta saker framför och i mitten är det bästa sättet att locka uppmärksamhet, så människor försöker logiskt nog göra det för det mesta. Så att sätta element i mitten borde vara det enklaste, mest optimerade att göra i webbutveckling, eller hur?
Eller hur?
FEL.
Det finns så många sätt att göra det på, så många alternativ och ändå, på något sätt, genom någon förbannelse, fungerar det fortfarande inte. Det är affischnamnet för CSS-klagomål, och av goda skäl. Timmar och timmar av sökning ”hur man centrerar saker i CSS”, ”hur man centrerar en div”, ”hur man centrerar en div i mitten av sidan”, ”hur man centrerar en text i html”, ”centrera div horisontellt och vertikalt” och listan kan fortsätta.
Ingenting ska någonsin vara så här komplicerat.
Kanske är det så här på grund av de olika och ofta förvirrande metoder (vissa bättre, andra sämre) som finns överallt på internet. Och kanske behöver människor lite vägledning när det gäller det här ämnet.
Så här är de, de bästa metoderna för att centrera saker i CSS.
1. Den grundläggande lösningen. Den här lösningen fungerar för inline-, inline-block-, inline-table- och inline-flex-element.
p { text-align: center }
2. För centreringsblock
p {
margin-left: auto;
margin-right: auto;
width: 4em
}
Eller
p {
margin: 0 auto;
width: 8em
}
3. När det gäller text är radhöjden ett bra knep att tänka på för centrering. Detta fungerar bäst för enradig text. Håll radhöjden på samma nivå som behållarens höjd. Precis så här:
p {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
Men om det är flera rader, använd bara:
p {
display: inline-block;
vertical-align: middle;
}
4. Att centrera bilder är lite knepigare, så det finns flera lösningar. Den första är
img {
display: block;
margin-left: auto;
margin-right: auto;
}
5. Den här är också bra för bilder
img {
max-width: 100%;
height: auto;
}
6. Lite mer komplicerat, men ändå bra för modala formuleringar.
section {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7. Centrering går också vertikalt, inte bara horisontellt. Det är här vi verkligen kan se en mängd olika alternativ och där räddaren som kallas flexdisplay kommer in i bilden.
Så när du centrerar saker med flex kan du använda
div {
height: 10em;
display: flex;
align-items: center;
}
Men! Tänk på att du måste ställa in flexriktningen. Så använd antingen
flex-direction:row;
För horisontell inriktning ELLER
flex-direction:column;
För vertikal justering
8. Fortfarande på temat att använda flex kan vi också använda kombinationer som
div {
height: 10em;
display: flex;
align-items: center;
justify-content: center
}
9. Naturligtvis kan position absolute hjälpa dig att centrera saker både horisontellt och vertikalt
div {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
10. En av de mer komplicerade lösningarna är att visa elementet som en tabell. Det fungerar fortfarande som en dröm, så döm inte ut det förrän du har provat det.
div {
display: table-cell;
vertical-align: middle;
}
11. Vill du använda rutnätet? Då blir det så mycket enklare. Du behöver bara en wrapper med
body, html {
height: 100%;
display: grid;
}
Och lägg sedan till detta i ditt element
div {
margin: auto;
}
Har vi missat någon? Eller har du andra lösningar som inte finns med på listan?