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:

margin: 0 auto;

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 PVPgox 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:

text-align: center;

Vertikalt

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

display: flex;
flex-direction: column;
justify-content: center;

Både horisontellt och vertikalt

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

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

Läs mer om centrering

Om du vill lära dig mer om centrering kan du läsa den här artikeln; http://css-tricks.com/centering-css-complete-guide/