CSS-Handbuch zur vertikalen und horizontalen vollständigen Zentrierung

Zentrierung war schon immer eine typische Beschwerde in CSS. Warum ist die Umsetzung so schwierig? Da wurde jemand ausgelacht. Ich denke, das Problem ist nicht, dass es keine Möglichkeit gibt, es hängt nur von der Situation ab. Es gibt viele verschiedene Möglichkeiten, aber es ist schwierig herauszufinden, welche Methode verwendet werden sollte.

Also habe ich diesen Artikel geschrieben, in der Hoffnung, es ihm einfacher zu machen.

Horizontal zentrieren

Das Inline-Element zentrieren (inline oder inline-*)?

Sie können es relativ zum übergeordneten Element auf Blockebene zentrieren

.center-children {
  text-align: center;
}

Element auf Blockebene (Blockebene) zentriert?

Sie können es zentrieren, indem Sie margin-left und margin-right auf „Auto“ setzen (und auch die Breite festlegen, sonst füllt es den gesamten Container aus, der Zentriereffekt). nicht sichtbar ist), wie z.

.center-me {
  margin: 0 auto;
}

Was ist, wenn es viele Elemente auf Blockebene gibt?

Wenn Sie sehr gleichmäßige Elemente auf Blockebene haben, die horizontal in einer Reihe zentriert werden müssen, ist es besser, einen anderen Anzeigetyp zu verwenden. Hier ist ein Beispiel mit Inline-Block und Flex.

<main class="inline-block-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>
<main class="flex-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}

Vertikale Zentrierung

Vertikale Zentrierung ist in CSS etwas knifflig

Inline-Elemente (inline oder inline-*) werden zentriert, wie Text und Links von?

Ist es eine Zeile?

Manchmal scheinen Elemente vertikal zentriert zu sein, nur weil sie oben und unten den gleichen Abstand haben.

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Wenn der Abstand aus irgendeinem Grund nicht funktioniert und der Text nicht umgebrochen wird, dann sind Sie da Sie können die Zeilenhöhe verwenden und sie der Höhe anpassen, um den Text auszurichten.

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Ist es mehrzeilig?

Auffüllmethoden wie oben und unten können auch mehrere Zeilen zentrieren. Wenn diese Methode jedoch nicht funktioniert, können Sie die Container dieser Texte im Tabellenzellenmodus anzeigen lassen. und legen Sie dann den Text fest. Das Vertical-Align-Attribut richtet sich aus, genau wie Talbe

<table>
  <tr>
    <td>
      I&#39;m vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I&#39;m vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

Elemente auf Blockebene (Blockebene) sind vertikal zentriert?

Kennen Sie die Höhe von das Element?

Aus vielen Gründen ist es durchaus üblich, die Höhe eines Weblayouts nicht zu kennen.

Aber wenn Ihr Layout eine feste Höhe hat, können Sie es vertikal wie folgt zentrieren:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}

Die Höhe des Elements ist unbekannt

Obwohl unbekannt, ist es dennoch möglich, die Breite um 50 % zu erhöhen

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Können Sie Flexbox verwenden?

Das ist nicht verwunderlich, die Verwendung von Flexbox ist viel einfacher

<main>  
  <div>
     I&#39;m a block-level element with an unknown height, centered vertically within my parent.
  </div>  
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

Gleichzeitig horizontal und vertikal zentrieren

Das Element hat eine feste Breite und Höhe

Wenn das Element eine feste Breite und Höhe hat, müssen Sie es dann zuerst absolut zentrieren Verschieben Sie es nach oben und verschieben Sie es einfach um 50 % der Breite nach links. Diese Lösung bietet eine hervorragende browserübergreifende Unterstützung.

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

Die Breite und Höhe des Elements sind unbekannt

Wenn Sie die Höhe und Breite (variabel) nicht kennen, können Sie diese verwenden das transofrm-Attribut auf beiden Die Richtung wird durch negative 50 % übersetzt

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

Weitere Artikel zu CSS-Handbüchern zur vertikalen und horizontalen vollständigen Zentrierung finden Sie auf der chinesischen PHP-Website!