Maison > interface Web > tutoriel CSS > le corps du texte

Comment centrer un div ?

WBOY
Libérer: 2024-07-17 13:52:07
original
609 Les gens l'ont consulté

How to center a div?

Comment centrer une division en CSS

Centrer un div est la chose la plus impossible

1. Centrage avec Flexbox

Flexbox est une manière moderne de centrer le contenu verticalement et horizontalement :

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
Copier après la connexion
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

2. Centrage avec grille

CSS Grid peut également centrer le contenu :

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}
Copier après la connexion
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

3. Centrage avec positionnement absolu

Vous pouvez centrer un div en utilisant le positionnement absolu :

.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copier après la connexion
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

4. Centrage avec marge automatique

Pour un centrage horizontal simple, utilisez margin: auto:

.centered-div {
    width: 50%;
    margin: 0 auto;
}
Copier après la connexion
<div class="centered-div">Centered Content</div>
Copier après la connexion

5. Centrage avec marge automatique

Pour les éléments en ligne ou en bloc en ligne :

.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
Copier après la connexion
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal