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

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

巴扎黑

Libérer： 2017-05-14 13:37:45

original

1701 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

Le rendu est le suivant :