Detaillierte Code-Erklärung zur Implementierung verschiedener zentrierter Füllmethoden mithilfe von CSS-Attributen

Der erste Weg ist horizontale Zentrierung Der einfachste Weg ist natürlich

margin:0 auto;

, also Rand links und Rand - Das rechte Attribut ist auf „Auto“ eingestellt, um einen horizontalen Zentrierungseffekt zu erzielen.

Wie wäre es mit anderen Möglichkeiten?

Zeilenhöhe

Führen Sie zunächst die horizontale Zentrierungsmethode für Text ein:

<p class="wrap">刘放</p>

Verwenden Sie Zeilenhöhe, um ihn auf die Höhe einzustellen:

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
   height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

Der Effekt ist wie folgt:

Padding

Verwenden Sie Padding und Hintergrundclip, um die horizontale und vertikale Zentrierung von zu erreichen p:

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

Legen Sie den Hintergrundclip auf „Content-Box“ fest, schneiden Sie den Hintergrund auf den äußeren Rand des Inhaltsbereichs zu und setzen Sie ihn dann mithilfe der Auffüllung auf die Hälfte der Differenz zwischen dem äußeren p minus das innere p:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

Der Effekt ist wie folgt:

Randfüllung

Als nächstes stellen wir die Methode der Randfüllung vor, um eine vertikale Zentrierung zu erreichen.
Zuerst definieren wir das übergeordnete und untergeordnete p:

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

Hier setzen wir den oberen Rand des untergeordneten p auf die Höhe des übergeordneten p minus der halben Höhe des untergeordneten p und dann Um den BFC des übergeordneten p auszulösen, lautet der LESS-Code wie folgt:

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

Der endgültige Zentrierungseffekt ist wie folgt:

Absolute Positionierung

Verwenden Sie position:absolute mit oben, links 50 % und stellen Sie dann den Rand auf einen negativen Wert ein, um p horizontal und vertikal zu zentrieren. Zuerst müssen Sie dies noch tun Definieren Sie das übergeordnete und untergeordnete p:

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

und legen Sie dann das entsprechende CSS fest:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

Der Wert im Rand beträgt die Hälfte der p-Breite und das endgültige Rendering lautet:

text-align Zentrierung

Wie wir alle wissen, kann text-align den Inhalt in einem p horizontal zentrieren. Aber was ist, wenn Sie das Sub-P in diesem P zentrieren möchten? Sie können die Anzeige von sub-p auf Inline-Block einstellen.

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

Flex-Zentrierung

Abschließend stellen wir die horizontale und vertikale Zentrierungsmethode vor, die von display:flex in CSS3 implementiert wird.

<p class="parent">
  <p class="children">我是通过flex的水平垂直居中噢！</p>
</p>

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

Die Wirkung ist wie folgt:

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung zur Implementierung verschiedener zentrierter Füllmethoden mithilfe von CSS-Attributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!