Zusammenfassung der Implementierungsmethoden für die vertikale und horizontale Zentrierung in CSS (mit Code)

Dieser Artikel bietet Ihnen eine Zusammenfassung der Implementierungsmethoden der vertikalen und horizontalen Zentrierung (mit Code). Ich hoffe, dass er für Sie hilfreich ist .

In letzter Zeit habe ich viele Interviewfragen mit der Frage gesehen: Bitte nennen Sie mir verschiedene Möglichkeiten, CSS zu verwenden, um eine vertikale und horizontale Zentrierung zu erreichen. Als ich die Grundlagen von CSS las, sah ich einen Artikel, in dem es um die vollständige Zentrierung ging. Hier ist eine Zusammenfassung des Inhalts des Artikels

1. Verwenden Sie absolute (Absolute Zentrierung)

1.1 Der spezifische Code lautet wie folgt:

.container {
    position: relative;
}

.absolute_center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 20px;
    overflow: auto;
}

<div>
    <div>
        <ul>
            <li>
                该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性
            </li>
        </ul>
    </div>
</div>

1.2 Die Kernidee von ​​Diese Methode ist:

Verwenden Sie Absolut für die Positionierung und das Layout, lösen Sie sich von den normalen Fließeigenschaften von Blockelementen und vervollständigen Sie die vertikale und horizontale Zentrierung durch die Fließeigenschaften von Absolut.

Hier sind zwei grundlegende Wissenspunkte, die Sie kennen müssen:

1. Fluideigenschaften:
Blockieren Sie horizontale Elemente, wie z. B. div-Elemente Standardmäßig (nicht schwebend, absolute Positionierung usw.) füllt die horizontale Richtung automatisch den äußeren Container, wenn es Rand-links/Rand-rechts, Polsterung-links/Polsterung-rechts, Rand-links-Breite/Rand gibt -rechte Breite usw., der tatsächliche Inhaltsbereich reagiert auf die Verengung;
2 Absolute Fließeigenschaften:
Es hat standardmäßig keine Fließeigenschaften, sondern nur unter bestimmten Bedingungen, und diese Bedingung ist „Positionierung in“. gleichzeitig entgegengesetzte Richtungen“ „Wenn“, das heißt, links und rechts in horizontaler Richtung positioniert sind, oben und unten in vertikaler Richtung positioniert sind und wenn die entgegengesetzten Richtungen gleichzeitig Positionierungswerte haben Es treten absolute Flüssigkeitseigenschaften auf.

1.3 Vorteile und Nachteile:

Vorteile:

1.3 Vorteile und Nachteile:

1. Kompatibel mit allen modernen Browsern;
Keine zusätzlichen Markup-HTML-Elemente.

3. Ja, Bilddateien sind ebenfalls verfügbar unterstützt;

Nachteile:

1. Die Höhe des Inhalts muss definiert werden.

2. Das Überlaufattribut muss hinzugefügt werden, um zu verhindern, dass der Inhalt angezeigt wird äußerer Container.

zwei, negative Ränder

Dies ist derzeit möglicherweise die am häufigsten verwendete Methode, wenn die Höhe und Breite des Elements festgelegt werden Legen Sie den Wert fest, setzen Sie das Element auf ein relatives Layout, um aus dem Dokumentfluss herauszukommen, legen Sie oben: 50 % links: 50 % fest und verwenden Sie „margin-left“ und „margin-top“, um das Element vollständig zu zentrieren.

2.1 Der spezifische Code lautet wie folgt:

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Negative {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -120px;
    background-color: cornsilk;
}

rrree

2.2 Die Kernidee von Diese Methode lautet:

Verwenden Sie ein relatives Layout, platzieren Sie den Inhalt mit „oben“ und „links“ in der Mitte des Containers und steuern Sie dann den Versatz mit „Margin“.

Hier gibt es einen Hinweis:

Bei Verwendung des box-sizing:border-box-Attributs muss der Offset nicht zur Berechnung des Randes und der Polsterung verwendet werden.

2.3 Vorteile und Nachteile:

Vorteile:

1. Gute Kompatibilität, einschließlich IE6-IE7

Keine Extras HTML-Elemente markieren, weniger Code; Um einen Überlauf zu verhindern, wenn die Texthöhe des Inhalts den äußeren Container überschreitet

3. Wenn das Element box-sizing:border-box verwendet und den Standard-Content-Box-Offset verwendet, ist es anders und muss neu berechnet werden ;

3. Verwenden Sie Transformationen

3.1 Der spezifische Code lautet wie folgt:

<div>
    <div>
    </div>
</div>

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Transformed { 
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%; 
    left: 50%;
    padding: 20px;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    background-color: darkseagreen;
}

3.2 Die Kernidee dieser Methode ist:

Relatives Layout verwenden, oben und links verwenden, um den Inhalt in der Mitte des Containers zu platzieren, und Verwenden Sie dann „Transform“, um die Offset-Menge zu steuern.

3.3 Vorteile und Nachteile:

Vorteile: 1. Die Breite und Höhe des Inhalts ist anpassbar, und die Breite und Höhe von Der Inhalt muss nicht angegeben werden. ;

Geringe Menge an Code

Nachteile:

1. Da transform nicht mit IE8 kompatibel ist Unterstützt nur moderne Browser IE9 und höher. Um mit verschiedenen Browsern kompatibel zu sein, sind einige zusätzliche CSS-Präfixe erforderlich.

3 🎜>4. Manchmal sind die Kanten unscharf. Dies ist möglicherweise die beste vertikale Zentrierungslösung, aber es gibt ein größeres Problem. Um den vertikalen Zentrierungseffekt zu vervollständigen, sind 3 Elemente erforderlich werden zur Fertigstellung benötigt.

4.1 Der spezifische Code lautet wie folgt:

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Table { 
  display: table; 
}

.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}

.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  background-color: deepskyblue;
}

<div>
    <div>
        <div>
            使用table-cell完成垂直水平居中
        </div>
    </div>
</div>

@import "./absolute_center4.png"{width="50%"}

4.2 该方法的核心思想是：

使用表格来实现垂直居中，再使用margin: 0 auto;来实现水平居中。

具体操作步骤如下：

1.设置父元素为块级表格；
2.设置子元素为表格单元格；
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中；
4.设置子元素中的内容的宽度，添加margin: 0 auto;属性，使子元素水平居中。

4.3 优缺点：

优点：

1.内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE8；

缺点：

1.完成一个垂直居中效果，需要3个html元素；

五、使用Inline-block

这也是一种常用的垂直水平居中的方法，但会存在一个问题：当内容的宽度大于容器宽度-0.25em的时候，会发生内容上移到顶部的方法，所以需要一些小的技巧来避免这样的问题。

5.1 具体代码如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  background-color: greenyellow;
  padding: 20px;
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

<div>
    <div>
        使用inline-block完成水平垂直居中
    </div>
</div>

5.2 该方法的核心思想是：

和table有点类似，设置内容为inline-block块，设置vertical-align: middle;属性使元素垂直方向居中，再父容器设置text-align:center;使子元素水平方向居中；

5.3 优缺点：

优：

1、内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE7；

缺：

1.依赖margin-left：-0.25em来矫正水平方向居中的误差；
2.内容的宽度必须小于容器的宽度减去0.25em。

六、使用Flexbox

弹性布局是当前移动端比较流行的布局方式，它可以很优雅的完成垂直水平居中效果。

6.1 具体代码如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.center_block {
  background-color: wheat;
  padding: 20px;
}

<div>
  <div>
    使用flexbox完成水平垂直居中
  </div>
</div>

6.2 该方法的核心思想是：

使用弹性布局，align-items: center;使元素在侧轴方向居中（默认是垂直方向），justify-content: center;使元素在主轴方向居中（默认是水平方向）;

6.3 优缺点：

优：

1.内容宽度、高度自适应,即便文本溢出也很优雅；
2.可以使用很多弹性布局的新特性；

缺：

1.兼容性比较差，目前只有IE10以上兼容；
2.需要写额外的兼容性前缀；
3.各个浏览器的表现可能会有一些差异；

Das obige ist der detaillierte Inhalt vonZusammenfassung der Implementierungsmethoden für die vertikale und horizontale Zentrierung in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!