Detaillierte Beispiele für zwei gängige Methoden zur horizontalen und vertikalen Zentrierung von Elementen in CSS-CSS-Tutorial-php.cn

Detaillierte Beispiele für zwei gängige Methoden zur horizontalen und vertikalen Zentrierung von Elementen in CSS

巴扎黑

Freigeben： 2017-05-14 13:37:45

Original

1776 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich zwei Möglichkeiten vor, wie Sie Elemente in CSS horizontal und vertikal zentrieren können. Der Artikel enthält einen vollständigen Beispielcode für Ihr Studium oder Ihre Arbeit , lasst uns gemeinsam einen Blick darauf werfen.

1. Das Flex-Layout des übergeordneten Elements realisiert die horizontale und vertikale Zentrierung des Elements

Der Beispielcode lautet wie folgt folgt:

<!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>

Nach dem Login kopieren

Die Darstellung ist wie folgt:

2. Absolute Positionierung und negativer Randwert erreichen horizontale und vertikale Zentrierung von Elementen

Hinweis: Das Element selbst muss die Breite und Höhe bestimmen

Der Beispielcode lautet wie folgt:

<!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>

Nach dem Login kopieren

Die Darstellung ist wie folgt:

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für zwei gängige Methoden zur horizontalen und vertikalen Zentrierung von Elementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!