1.1 KiB

Raw Blame History

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;
}

1.1 KiB Raw Blame History