cours/docs/dev/fragments/css/01-centrer.md

Centrer des éléments

Il existe plusieurs méthodes permettant de centrer des éléments en CSS. L'utilisation de l'une ou de l'autre dépend généralement du contexte dans lequel se trouve l'élément à centrer.

Description

Il est possible de centrer horizontalement et verticalement. À la fois dans toute la page ou dans une zone de contenu définie.

Exemples

Centrer du texte

p {
	text-align: center;
}

Centrer horizontalement un élément dont la largeur est restreinte

.container {
	max-inline-size: 60ch;
	margin-inline: auto;
}

Centrer horizontalement le contenu d'un élément

.container {
	display: flex; /* ou grid */
	justify-content: center;
}

Centrer verticalement le contenu d'un élément

.container {
	display: flex; /* ou grid */
	align-items: center;
}

Centrer horizontalement et verticalement le contenu d'un élément

.container {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* OU */
.container {
	display: grid;
	place-content: center;
}