Explication détaillée du centrage des éléments CSS

Centré horizontalement

S'il s'agit d'un élément en ligne, utilisez simplement text-align:center sur son élément parent

S'il s'agit d'un élément bloc (non flottant), il existe généralement deux méthodes pour réaliser un centrage horizontal, l'une est margin : 0 auto ; l'autre consiste à calculer la fonction calc via css ; 🎜> Centrage vertical

S'il s'agit d'un élément en ligne, utilisez généralement line-height:{height} sur son élément parent. S'il s'agit d'un élément image, vous devez utiliser vertical-. align on the element: middle; De plus, on peut voir que les éléments à l'intérieur de l'élément table td peuvent être centrés verticalement en utilisant vertical-align:middle et en utilisant display:table-cell;vertical -align:middle; sur l'élément parent Il est également possible de centrer verticalement les éléments, et cette méthode peut être utilisée à la fois pour les éléments en ligne et les éléments de bloc si

est un élément de bloc (les éléments en ligne finiront par devenir). bloquer les éléments en utilisant cette méthode), puis le centrage vertical des éléments peut être obtenu grâce à certains attributs tels que la position. Les étapes de base sont : 1. Définir la position de l'élément parent : relative ; 2. Définir la position de l'élément : absolue ; %; left: 50%; 3. Définissez la marge de l'élément-top:-{height}/2;margin-left:-{width}/2;

Centrage des éléments flottants

if Pour les éléments de bloc flottants (tels que float:left), vous devez utiliser certains attributs tels que la position pour obtenir le centrage horizontal et vertical de l'élément. 1. Placez un p sur la couche externe de l'élément et définissez son style : float:left;overflow: Hidden; display: inlineblock; 2. Définissez l'attribut de position p externe sur relatif, et les valeurs du haut et de gauche sont les deux 50% ; 3. Définissez le style de l'élément : transform: translation (-50%, -50%); L'article ci-dessus discutant brièvement du centrage des éléments CSS est tout le contenu partagé par l'éditeur. j'espère que cela pourra vous donner une référence, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour des explications plus détaillées sur le centrage des éléments CSS et les articles associés, veuillez faire attention au site Web PHP chinois !