6 CSS-Lösungen für die horizontale und vertikale Zentrierung

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zu horizontalen und vertikalen CSS-Zentrierungslösungen (6 Typen) vor. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Vorbereiten

Element erstellen

<p class="parent">
  <p class="child">child</p>
</p>

Vertikale und horizontale Zentrierungslösung eins: Absolut + negativer Randwert, wenn die Breite bekannt ist

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  background: yellow;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
}

Vertikale und horizontale Zentrierungslösung zwei: Absolut+Transformation

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

Vertikale Zentrierungslösung drei: position+margin:auto

.parent {
  position:relative;
  width:200px;
  height:200px;
  background: red;
}
.child {
  width:80px;
  height:40px;
  background: yellow;
  position: absolute;
  left:0;
  top:0;
  right:0 ;
  bottom:0;
  margin:auto;
}

vertikale Zentrierungslösung vier: + Vertikale Zentrierung von mehrzeiligem Text: table-cell+vertical-align:middle;

.parent {
    height: 300px;
    width:400px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
  display: inline-block;
  width:50px;
  height:50px;
  background: blue;
}
/* 或者 */
.parent {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
    text-align: center;
}
.child {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

Vertikale Zentrierung Lösung fünf: Anzeige: Flex

.parent {
  width:400px;
  height:200px;
  background:red;
  display: flex;
  justify-content:center;
  align-items:center;
}
.child {
  height:100px;
  width:100px;
  background:green;
}

Vertikale Zentrierung Option 6: Pseudo Elemente

.parent {
  width:200px;
  height:200px;
  background:red;
  text-align: center;
}
.child {
  height:100px;
  width:100px;
  background:yellow;
  display: inline-block;
  vertical-align: middle;
}
.parent:before {
  content:"";
  height:100%;
  vertical-align: middle;
  display: inline-block;
}

Verwandte Empfehlungen:

4 Möglichkeiten zur Implementierung horizontaler und vertikaler CSS-Zentrierung

HTML-Elemente So richten Sie horizontal ein und vertikale Zentrierung

Code-Sharing zum Erreichen einer horizontalen und vertikalen Zentrierung und Ausrichtung an beiden Enden mit CSS

Das obige ist der detaillierte Inhalt von6 CSS-Lösungen für die horizontale und vertikale Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!