Comment centrer la boîte horizontalement en CSS3

Comment centrer la boîte horizontalement en CSS3 : 1. Utilisez l'attribut margin et ajoutez le style "margin: 0 auto;" à l'élément box pour le centrer horizontalement ; 2. Utilisez la disposition élastique flexible pour obtenir un centrage horizontal ; Utiliser position et transformer Les attributs sont centrés horizontalement.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment centrer une boîte horizontalement en CSS est une question d'entretien très courante. Le centrage d'une boîte est relatif à l'élément parent, donc lorsque nous centrons la boîte, nous utilisons souvent l'imbrication, afin que la boîte parent imbrique la boîte enfant. .

Comment centrer la boîte enfant lorsque les boîtes parent et enfant sont imbriquées :

• La première méthode : margin : 0 auto, en utilisant des bordures, mais l'utilisation de la marge affectera l'utilisation des autres boîtes, donc ce n'est pas le cas recommandé ;

• La deuxième méthode : positionner, utiliser le positionnement, l'enfant doit être le même que le parent, puis à gauche : 50%, marge-gauche : la moitié de la largeur de la boîte négative, c'est la méthode la plus couramment utilisée ;

• La troisième méthode : Flex, mise en page flexible, centre la boîte enfant, mais le style doit être écrit dans la boîte parent , display:flex, just-content:center

• Quatrième méthode : Basée sur la position; , changez margin-left Dans la transformation en CSS3 : translate(-50px);

• La cinquième méthode : en fonction de la position, ne conservez que l'enfant et le parent, puis ajoutez margin:auto, left:0, right in la boîte enfant :0;
  Supplément : Dans la cinquième méthode, en ajoutant haut:0, bas:0, vous pouvez obtenir un centrage vertical et horizontal

<div id="father">
    <div id="son"></div>
</div>

<style>
    #father{
        width: 400px;
        height: 200px;
        border: 3px solid pink;
    }
    #son{
        width: 100px;
        height: 100px;
        border: 2px solid red;
    }
</style>

Utilisez la marge pour obtenir un centrage horizontal :

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 30px auto; /* 让父元素相对于body居中 */
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 0 auto;/* 让子元素相对于father居中 */
}
</style>

Utilisez positionnement , l'enfant doit être le même que le parent, puis gauche : 50%, marge-gauche : moitié de la largeur de la case négative :

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
</style>

flex, mise en page flexible, centrer la case enfant, mais le style doit être

écrit en la boîte parent  :

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}
</style>

Sur la base de la position, ne gardez que l'enfant et le parent, puis ajoutez margin:auto, left:0, right:0 à la boîte enfant :

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}
</style>

Les méthodes ci-dessus peuvent atteindre l'horizontale centrage de la boîte. Si vous avez d'autres méthodes excellentes (étranges) et voyantes (pai), bienvenue pour échanger !

La cinquième méthode est ajoutée : l'ajout de top:0, bottom:0 permet d'obtenir un centrage horizontal et vertical :

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
</style>

(Partage vidéo d'apprentissage :

tutoriel vidéo CSS)

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!