Centrering

Att centrera saker har inte alltid varit helt enkelt i HTML. Nu mer kan man ofta förlita sig på saker som flexbox, som gör livet mycket enklare.

Det finns en hel del olika sätt på vilka man kan åstadkomma centrering. Först måste vi definiera hur du vill centrera...

Horisontellt...

Är det du vill centrera ett block-element?

Metod 1

Sätt både vänster- och högermarginal till auto. T.ex. så här:

See the Pen rPObWj by Patrik Grip-Jansson (@PGJ) on CodePen.

Om ditt block-element inte har en bredd, kanske det inte centreras pga av att det är stort nog att fylla hela den tillgängliga ytan.

Metod 2

Använd flexbox och sätt föräldra-elementet till display: flex;. Då kan man ändra positioneringen med justify-content. För centrering använder du: justify-content: center;

See the Pen ZwbZxe by Patrik Grip-Jansson (@PGJ) on CodePen.

Är det du vill centrera ett inline-element?

Gäller för t.ex. text och liknande. Sätt text-align till center. Så här:

See the Pen PVPgpL by Patrik Grip-Jansson (@PGJ) on CodePen.

Vertikalt

Det lättaste är att använda sig av flexbox, t.ex. så här:

See the Pen bzENdJ by Patrik Grip-Jansson (@PGJ) on CodePen.

Både horisontellt och vertikalt

Använd flexbox, t.ex. så här:

See the Pen vbNMzb by Patrik Grip-Jansson (@PGJ) on CodePen.

Läs mer om centrering

Om du vill lära dig mer om centrering kan du läsa den här artikeln: Centering CSS Complete Guide