Maison > Article > interface Web > Exemples détaillés de deux méthodes courantes pour réaliser le centrage horizontal et vertical des éléments en CSS

Exemples détaillés de deux méthodes courantes pour réaliser le centrage horizontal et vertical des éléments en CSS

巴扎黑original: 2017-05-14 13:37:451740parcourir

Cet article vous présente principalement deux façons d'obtenir un centrage horizontal et vertical des éléments en CSS. L'article donne un exemple de code complet pour votre référence et votre étude. Il a une certaine valeur de référence pour votre étude ou votre travail. , jetons un coup d'oeil ensemble.

1. La disposition flexible de l'élément parent réalise le centrage horizontal et vertical de l'élément

L'exemple de code est le suivant suit :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .parent{
      display:flex;
      display:-webkit-flex;
      justify-content: center;
      align-items: center;
      width:100%;
      height: 200px;
      background-color: #c43;
    }

    .child{
      width:300px;
      height:100px;
      background-color: #c4235b;
    }
  </style>
</head>
<body>
  <p class="parent">
    <p class="child"></p>
  </p>
</body>
</html>

Le rendu est le suivant :

2. Le positionnement absolu et la valeur de marge négative permettent d'obtenir un centrage horizontal et vertical des éléments

Remarque : L'élément lui-même doit déterminer la largeur et la hauteur

L'exemple de code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    p{
      width:300px;
      height:100px;
      background-color: #873cac;
      position:absolute;
      top:50%;
      left:50%;
      margin-left: -150px;
      margin-top:-50px;
    }  
  </style>
</head>
<body>
  <p></p>
</body>
</html>

Le rendu est le suivant :

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!

Déclaration：

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

Article précédent：Implémentation CSS3 d'un exemple de code d'effets spéciaux Checkbox personnaliséArticle suivant：Implémentation CSS3 d'un exemple de code d'effets spéciaux Checkbox personnalisé

Articles Liés

Voir plus