Comment puis-je centrer verticalement une division à l'intérieur d'une autre division ?

Centrer verticalement un div à l'intérieur d'un autre div

Lorsque vous souhaitez centrer un div dans un autre div, votre première approche peut être d'utiliser les valeurs de marge supérieure et de marge gauche. , comme le montre l'exemple CSS ci-dessous :

#outerDiv {
    width: 500px;
    height: 500px;
    position: relative;
}

#innerDiv {
    width: 284px;
    height: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -147px;
    margin-left: -144px;
}

Cependant, cette méthode nécessite des ajustements chaque fois que la taille du div interne change. Pour une solution plus générique, nous pouvons explorer les options suivantes :

Vertical Align Middle

Utilisation de vertical-align : middle aligne le div verticalement dans son conteneur parent. Pour utiliser cette technique :

1. Définissez le conteneur parent pour afficher : table-cell et alignez-le verticalement avec vertical-align: middle.
2. Définissez le div interne pour afficher : inline- bloquer.

Solutions modernes :

1. Transformer

Les transformations offrent une approche plus simple :

1. Placez le div interne en position absolue avec haut : 50 % et gauche : 50%.
2. Appliquer un transform : translate(-50%,-50%) pour centrer le div dans les deux dimensions.

2. Flexbox

Flexbox, grâce à sa flexibilité, fournit la solution la plus simple :

1. Définissez le conteneur parent pour afficher : flex.
2. Utilisez justifier-content : center et align-items : centrer pour centrer le div interne à la fois horizontalement et verticalement.

La méthode spécifique que vous choisir dépendra de vos exigences et préférences de compatibilité.

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!