Comment centrer verticalement deux éléments à l'intérieur d'une division ?

Comment centrer verticalement deux éléments dans un div

Pour aligner deux éléments verticalement dans un div, vous pouvez utiliser l'une des méthodes suivantes :

1. Méthode CSS Flexbox

Cette méthode consiste à utiliser la propriété flexbox pour définir la direction de flexion, l'alignement et la justification des éléments.

Code CSS :

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Ce code créera un conteneur flexible qui empile les éléments verticalement et les centre à la fois horizontalement et verticalement.

2. Table CSS et méthode de positionnement

Cette méthode utilise les propriétés display: table et vertical-align: middle pour aligner les éléments verticalement dans le div.

Code CSS :

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

Ce code fera en sorte que l'élément body se comporte comme un tableau, et le div #container sera positionné comme une cellule de tableau et aligné verticalement dans le milieu.

Recommandation

Flexbox est généralement recommandé par rapport à la table et à la méthode de positionnement en raison de son approche moderne, de sa flexibilité et de sa facilité d'utilisation.

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!