Heim > Artikel > Web-Frontend > Detaillierte Beispiele für zwei gängige Methoden zur horizontalen und vertikalen Zentrierung von Elementen in CSS

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

巴扎黑Original: 2017-05-14 13:37:451740Durchsuche

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3-Implementierung des Beispielcodes für benutzerdefinierte Checkbox-SpezialeffekteNächster Artikel：CSS3-Implementierung des Beispielcodes für benutzerdefinierte Checkbox-Spezialeffekte

In Verbindung stehende Artikel

Mehr sehen