Detaillierte Code-Erklärung von acht Möglichkeiten, eine Zentrierung mit absoluter CSS-Positionierung zu erreichen

Absolut positionierte Elemente werden im normalen Inhaltsfluss nicht gerendert, daher kann margin:auto den Inhalt vertikal innerhalb der durch top: 0; left: 0;

Zentrierungsmethode:

1. Innerhalb des Containers

Der übergeordnete Container des Inhaltsblocks ist auf position:relative eingestellt. Verwenden Sie die oben genannte absolute Zentrierungsmethode, um den angezeigten Inhalt zu zentrieren im übergeordneten Container.

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Die verbleibenden Demos unten enthalten standardmäßig die oben genannten CSS-Stile. Auf dieser Basis werden nur zusätzliche Klassen bereitgestellt, die Benutzer hinzufügen können, um verschiedene Funktionen zu erreichen.

2. Im Ansichtsfenster

Möchten Sie, dass der Inhaltsblock im sichtbaren Bereich bleibt? Setzen Sie den Inhaltsblock auf position:fixed; und legen Sie einen größeren Z-Index-Stacking-Eigenschaftswert fest.

.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

Hinweis: Wenn der Inhaltsblock bei Mobile Safari nicht in einem übergeordneten Container platziert wird, der auf position:relative; festgelegt ist, wird der Inhaltsblock im gesamten Dokument vertikal zentriert und nicht innerhalb des Dokuments sichtbarer Bereich.

3. Seitenleiste (Offsets)

Wenn Sie einen festen Header festlegen oder andere Seitenleisten hinzufügen möchten, müssen Sie nur CSS-Stilcode wie diesen zum Stil des Inhaltsblocks hinzufügen: oben :70px;bottom:auto;Da ​​margin:auto; deklariert wurde, wird der Inhaltsblock vertikal innerhalb des Begrenzungsrahmens zentriert, den Sie über die Eigenschaften oben, links, unten und rechts definieren.

Sie können den Inhaltsblock auf der linken oder rechten Seite des Bildschirms anheften und den Inhaltsblock vertikal zentriert halten. Verwenden Sie right:0;left:auto;, um die rechte Seite des Bildschirms zu fixieren, und left:0;right:auto;, um die linke Seite des Bildschirms zu fixieren.

.Absolute-Center.is-Right {
  left: auto; right: 20px;
  text-align: right;
}

.Absolute-Center.is-Left {
  right: auto; left: 20px;
  text-align: left;
}

4. Responsive/Adaptive (Responsive)

Der größte Vorteil der absoluten Zentrierung sollte die perfekte Unterstützung für prozentuale Breite und Höhe sein. Sogar die Attribute min-width/max-width und min-height/max-height verhalten sich innerhalb der adaptiven Box wie erwartet.

.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

Das Hinzufügen von Auffüllungen zum Inhaltsblockelement hat keinen Einfluss auf die absolute Zentrierung des Inhaltsblockelements.

5. Überlauf (Überlauf)

Wenn die Höhe des Inhalts größer als das Blockelement oder der Container ist (Ansichtsfenster oder übergeordneter Container auf position:relative eingestellt), kommt es zu einem Überlauf Wenn der Inhalt außerhalb des Blocks und Containers angezeigt wird oder abgeschnitten ist, ist die Anzeige unvollständig (entsprechend der Leistung, wenn das Überlaufattribut des Inhaltsblocks auf „sichtbar“ bzw. „verborgen“ gesetzt ist).

Überlauf hinzufügen: Auto zeigt Bildlaufleisten für den Inhaltsblock an, ohne die Grenze zu überschreiten, wenn die Inhaltshöhe die Höhe des Containers überschreitet.

.Absolute-Center.is-Overflow {
  overflow: auto;
}

Wenn der Inhaltsblock selbst keinen Abstand festlegt, können Sie max-height: 100 % festlegen, um sicherzustellen, dass die Inhaltshöhe die Containerhöhe nicht überschreitet.

6. Größenänderung

Sie können andere Klassen oder Javascript-Code verwenden, um den Inhaltsblock neu zu zeichnen und gleichzeitig sicherzustellen, dass er zentriert ist, ohne die Mittengröße manuell neu berechnen zu müssen. Natürlich können Sie auch das Größenänderungsattribut hinzufügen, um Benutzern die Möglichkeit zu geben, den Inhaltsblock per Drag-and-Drop neu zu zeichnen.

Absolute Centering kann sicherstellen, dass der Inhaltsblock immer zentriert ist, unabhängig davon, ob der Inhaltsblock neu gezeichnet wird. Sie können die Größe des Inhaltsblocks entsprechend Ihren Anforderungen begrenzen, indem Sie Min-/Max- festlegen und verhindern, dass der Inhalt das Fenster/den Container überfüllt.

.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
}

Wenn Sie das Attribut resize:both nicht verwenden, können Sie den Übergang des CSS3-Animationsattributs verwenden, um einen reibungslosen Übergang zwischen neu gezeichneten Fenstern zu erreichen. Stellen Sie sicher, dass Sie overflow:auto; festlegen, um zu verhindern, dass die Größe des neu gezeichneten Inhaltsblocks kleiner als die tatsächliche Größe des Inhalts wird.

Absolute Centering ist die einzige Technologie, die das resize:both-Attribut unterstützt, um eine vertikale Zentrierung zu erreichen.

Hinweis:

1. Es ist notwendig, die Attribute max-width/max-height festzulegen, um die Auffüllung des Inhaltsblocks auszugleichen, andernfalls kann es zu einem Überlauf kommen.

2. Mobile Browser und IE8-IE10-Browser unterstützen das Größenänderungsattribut nicht. Wenn dieser Teil der Benutzererfahrung für Sie erforderlich ist, stellen Sie sicher, dass die Größenänderung für Ihre Benutzer möglich ist . Rückzug.

3. Die gemeinsame Verwendung der Größenänderungs- und Übergangsattribute erzeugt eine Verzögerungszeit für die Übergangsanimation, wenn der Benutzer neu zeichnet.

7. Bilder

Absolute Zentrierung ist auch auf Bilder anwendbar. Wenden Sie eine Klasse oder einen CSS-Stil auf das Bild selbst an und fügen Sie dem Bild den Stil height:auto hinzu. Wenn die Größe des äußeren Containers geändert werden kann, wird das Bild angepasst entsprechend neu gezeichnet und bleiben immer zentriert.

Es ist zu beachten, dass height:auto zwar zum Zentrieren des Bildes nützlich ist, es jedoch einige Probleme verursacht, wenn height:auto auf den äußeren Inhaltsblock des Bildes angewendet wird: Der reguläre Inhaltsblock wird gestreckt und den gesamten Behälter füllen. Zu diesem Zeitpunkt können wir die variable Höhe (Variable Height) verwenden, um dieses Problem zu lösen. Die Ursache des Problems kann darin liegen, dass die Bildhöhe beim Rendern des Bildes berechnet werden muss. Dies ist so, als ob Sie die Bildhöhe selbst definieren. Sobald der Browser die Bildhöhe erhält, analysiert er margin:auto und zentriert sie nicht vertikal wie andere Situationen. Daher wenden wir diese Stile besser auf das Bild selbst an als auf das übergeordnete Element.

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image {
  height: auto;
}

.Absolute-Center.is-Image img { 
  width: 100%;
  height: auto;
}

8. Variable Höhe (Variable Höhe)

这种情况下实现绝对居中（AbsoluteCentering）必须要声明一个高度，不管你是基于百分比的高度还是通过max-height控制的高度，还有，别忘了设置合适的overflow属性。对自适应/响应式情景，这种方法很不错。

与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高，内容块都会保持居中。这种方法在一些浏览器（如IE/FireFox）上会有问题，我的搭档Kalley 

在ELL Creative（访问ellcreative.com ）上写了一个基于Modernizr插件的检测函数，用来检测浏览器是否支持这种居中方法，进一步增强用户体验。

Javascript：

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});

CSS：

.absolutecentercontent .Absolute-Center.is-Variable {
  display: table;
  height: auto;
}

浏览器兼容性不太好，若Modernizr不能满足你的需求，你需要寻找其他方法解决。

1.      与上述重绘(Resizing)情况的方法不兼容

2.      Firefox/IE8:使用display:table会使内容块垂直居上，不过水平还是居中的。

3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

4.      Mobile Safari:内容块垂直居中；若使用百分比宽度，水平方向居中会稍微偏离中心位置。

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung von acht Möglichkeiten, eine Zentrierung mit absoluter CSS-Positionierung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!