Centrera med CSS

Jag ställs ofta inför uppgiften att centrera något. Antingen horisontellt eller vertikalt, och ofta på båda ledderna samtidigt. När inte flex och grid fanns i CSS kunde det vara ganska bökigt att få till vertikal och horisontell centrering. Nu finns det smidiga lösningar!

Vi utgår från ett span-element i en div:

I want to be centered!

Inga konstigheter här.

<div>
	<span>Jag vill centreras!</span>
</div>

div {
	border: 1px solid goldenrod;
	border-radius: 8px;
	height: 100px;
}

Men hur får vi texten centrerad? Det finns en massa krångliga sätt att göra det på som var vanliga förut, men jag försöker alltid hålla mig till trevligare lösningar. Här är en lösning med flex och samma HTML som ovan:

div {
	border: 1px solid goldenrod;
	border-radius: 8px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

I want to be centered!

Här är det justify-content: center som löser den horisontella centreringen och align-items: center som löser den vertikala. Trevligt! Men med grid är det faktiskt ännu lite trevligare:

div {
	border: 1px solid goldenrod;
	border-radius: 8px;
	height: 100px;
	display: grid;
	place-items: center;
}

I want to be centered!

Här löser place-items: center all centrering. Supertrevligt! Med place-items har vi stora möjligheter att påverka placeringen precis som vi vill. Om vi skulle vilja högercentrera span-elementet i mitten av ramen kan vi göra det genom att bara lägga till end efter center:

div {
	border: 1px solid goldenrod;
	border-radius: 8px;
	height: 100px;
	display: grid;
	place-items: center end;
}

I want to be centered!

Ett alternativ till place-items är att använda margin: auto på span-elementet:

div {
	border: 1px solid goldenrod;
	border-radius: 8px;
	height: 100px;
	display: grid;
}

span {
	margin: auto;
}

I want to be centered!

Fördelen med margin: auto på elementet som ska centreras är att det möjliggör att ha flera element i ramen där alla inte är centrerade, vilket är svårare när CSS för centrering i stället anges på div-elementet som omsluter elementen:

<div>
	<span class="center">Jag vill centreras!</span>
	<span>Jag vill inte centreras.</span>
</div>

div {
	border: 1px solid goldenrod;
	border-radius: 8px;
	height: 100px;
	display: grid;
}

span {
	border: 1px solid #000000;
}

.center {
	margin: auto;
}

I want to be centered!I don't want to be centered.

Jag la också på en svart ram på span-elementen så att vi kan se vad som händer. Elementet som vill centreras har en marginal runt sig så att texten hamnar mitt i övre halvan av div-elementet. Det andra elementet har ingen marginal och tar därför upp hela andra halvan av div-elementet, och texten hamnar högst upp till vänster.

Glad centrering!