Mehrere Methoden zur CSS-Zentrierung

Im Webdesign ist die Zentrierung sowohl für die Schönheit als auch für die Lesbarkeit sehr wichtig. In CSS gibt es viele Möglichkeiten, eine Zentrierung zu erreichen. Hier sind einige häufig verwendete Methoden.

1. Textzentrierung

1. Inline-Elementtextzentrierung

Für eine einzelne Textzeile können wir das text-align-Attribut verwenden Vervollständigen Sie die Zentrierung.

<div style="text-align: center;">这里是居中的文本</div>

2. Blockelementtext ist zentriert

Für mehrzeiligen Text oder Blockelemente können wir das Randattribut verwenden, um den linken und rechten Rand auf „Automatisch“ zu setzen Die Breitenzentrierung erfolgt nicht zu 100 %.

<div style="margin: 0 auto; width: 80%;">这里是居中的多行文本</div>

2. Elementzentrierung

1. Horizontale Zentrierung

Verwenden Sie das Randattribut und stellen Sie den linken und rechten Rand auf „Automatisch“, um die horizontale Zentrierung abzuschließen .

<div style="margin: 0 auto;"></div>

2. Vertikale Zentrierung

Die vertikale Zentrierungsmethode ist komplizierter und es gibt viele Möglichkeiten, sie umzusetzen.

(1) Verwenden Sie Flexbox

, um display:flex und align-items:center auf dem übergeordneten Element festzulegen, um eine vertikale Zentrierung zu erreichen.

<div style="display: flex; align-items: center; height: 200px;">
  <div>这里是垂直居中的元素</div>
</div>

(2) Verwenden Sie table-cell

Setzen Sie display:table und Vertical-align:middle auf dem übergeordneten Element und legen Sie display:table-cell auf dem untergeordneten Element fest . Vertikale Zentrierung ist möglich.

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

(3) Verwenden Sie absolute

, um position:absolute;top:50%;left:50% und transform:translate(-50%,- 50%) festzulegen um eine vertikale Zentrierung zu erreichen.

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">这里是垂直居中的元素</div>
</div>

(4) Verwenden Sie line-height

Setzen Sie height und line-height im übergeordneten Element gleich und legen Sie im untergeordneten Element Vertical-Align:Middle fest, um dies zu erreichen Vertikal zentriert.

<div style="height: 200px; line-height: 200px;">
  <div style="display: inline-block; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

Durch die oben genannten Methoden können wir leicht den zentrierenden Effekt von Elementen in Webseiten erzielen. Um bessere visuelle Effekte auf der Seite zu erzielen, muss je nach Situation die geeignete Methode ausgewählt werden.

Das obige ist der detaillierte Inhalt vonMehrere Methoden zur CSS-Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!