CSS vertikal horizontal vollständig zentriert Handbuch

Horizontale Zentrierung

Ist ein Inline-Element (inline oder inline-*) zentriert?

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 wird es voll). gesamter Behälter, der Zentriereffekt ist nicht erkennbar), 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.

Online-Beispiel: http://jsfiddle.net/ourjs/0b6b7wt8/

<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 bei Etwas knifflig in CSS

Wie zentriere ich Inline-Elemente (Inline oder Inline-*), wie Text und Links?

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 Sie 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?

Die Auffüllmethode oben und unten kann auch mehrere Zeilen zentrieren. Wenn diese Methode jedoch nicht funktioniert, können Sie die Container dieser Texte im Tabellenzellenmodus anzeigen lassen und dann das Attribut „Vertikal ausrichten“ festlegen Text zum Ausrichten, wie Talbe so

Online-Demonstration: http://jsfiddle.net/ourjs/0fn2u4rc/

<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 sind vertikal zentriert?

Kennen Sie die Höhe des Elements?

Die Höhe eines Webseitenlayouts nicht zu kennen, kommt aus vielen Gründen häufig vor.

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

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

Die Höhe des Elements ist unbekannt

Auch wenn sie unbekannt ist , Sie können die Breite immer noch um 50 % erhöhen

Online-Demo: http://jsfiddle.net/ourjs/9sLf7p56/

.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;
}

Zentrierung sowohl horizontal als auch vertikal

Elemente haben feste Breite und Höhe

Wenn die Breite und Höhe des Elements festgelegt sind, müssen Sie es zuerst absolut zentrieren und dann um 50 % der Breite nach oben und links verschieben. 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;
}

　元素的宽度高度未知

　　如果你不知道高度和宽度（可变的），你可以使用transofrm属性在两个方向都平移负50%

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