So zentrieren Sie CSS

In der Frontend-Entwicklung ist ein zentriertes Layout eine häufige Anforderung, insbesondere in der mobilen Entwicklung. Um den Stil und die visuelle Schönheit in Einklang zu bringen, müssen wir die Elemente zentrieren. Hier sind einige gängige CSS-Zentrierungsmethoden.

1. Horizontales Zentrierungslayout

1. Rand: 0 automatisch

Dies ist die am häufigsten verwendete horizontale Zentrierungsmethode . Stellen Sie einfach den linken und rechten Rand des Elements auf „Auto“. Diese Methode funktioniert für Blockelemente, funktioniert jedoch nicht, wenn Ihr Element absolut positioniert oder schwebend ist.

.box {
  width: 200px;
  margin: 0 auto;
}

2. text-align: center

Wenn das Element, das Sie horizontal zentrieren müssen, ein Inline-Element ist, können Sie text-align verwenden: center-Eigenschaft, zentrieren Sie einfach den Text des übergeordneten Containers.

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

3. Flexibles Box-Layout

Flex-Layout ist eine leistungsstarke CSS-Layoutmethode, mit der sich problemlos viele Zentrierungseffekte erzielen lassen. Mit Flexbox können wir untergeordnete Elemente in der Mitte des übergeordneten Containers platzieren.

.parent {
  display: flex;
  justify-content: center;
}
.child {
  width: 50px;
}

2. Vertikales Zentrierungslayout

1. line-height

Dies ist die einfachste vertikale Zentrierungsmethode Setzen Sie die Zeilenhöhe des Elements auf seine Höhe.

.box {
  height: 80px;
  line-height: 80px;
}

2. table-cell

Mit den Attributen display: table und table-cell können Sie ganz einfach den vertikalen Zentrierungseffekt von Elementen erzielen.

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

3. Flexibles Box-Layout

Wie die horizontale Zentrierung kann auch die vertikale Zentrierung von Elementen mit Flexbox erreicht werden.

.parent {
  display: flex;
  align-items: center;
}
.child {
  height: 50px;
}

3. Horizontales und vertikal zentriertes Layout

1. Absolute Positionierung und negativer Rand

Verwenden Sie absolute Positionierung und negative Rand Eine horizontale und vertikale Zentrierung von Elementen kann problemlos erreicht werden.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px; /* height/2 */
  margin-left: -25px; /* width/2 */
  height: 50px;
  width: 50px;
}

2. Transform

Mit Transform können Sie auch die horizontalen und vertikalen Zentrierung von Elementen erreichen -50 % Kann.

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

3. Flexbox

Flexbox ist auch die beste Wahl für die horizontale und vertikale Zentrierung von Elementen. Stellen Sie den übergeordneten Container des Elements auf display:flex ein und verwenden Sie dann die Eigenschaften justify-content und align-items, um ein zentriertes Layout zu erreichen.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  height: 50px;
  width: 50px;
}

Die oben genannten sind die gängigen CSS-Zentrierungsmethoden. Bei der tatsächlichen Entwicklung sollte die am besten geeignete Zentriermethode basierend auf Typ, Struktur, Anforderungen und anderen Faktoren des Elements ausgewählt werden.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!