Ausführliche Erläuterung der Vor- und Nachteile verschiedener Techniken zur Implementierung zentrierter Stile in CSS

Negative Margen

Dies ist derzeit vielleicht die beliebteste Verwendungsmethode. Wenn die Größe des Blockelements bekannt ist, können Sie den Inhaltsblock folgendermaßen im Container zentrieren:

Nehmen Sie eine negative Zahl für den Rand und die Größe ist Breite/Höhe (einschließlich Abstand beim Boxen). -sizing: border-box wird nicht verwendet, plus oben: 50 %; links: 50 %;. Nämlich:

.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

Tests zeigen, dass dies die einzige Methode ist, die auch auf IE6-IE7 eine gute Leistung erbringt.

Vorteile:

1. Gute browserübergreifende Funktionen, kompatibel mit IE6-IE7.

2. Die Codemenge ist gering.

Nachteile:

1. Es kann nicht adaptiv sein. Prozentuale Größen- und Min-/Max-Eigenschaftseinstellungen werden nicht unterstützt.

2. Der Inhalt kann über den Behälter laufen.

3. Die Größe des Randes hängt von der Polsterung ab und davon, ob die Boxgröße definiert ist: Die Berechnung muss auf verschiedenen Situationen basieren.

Transformationen

Dies ist die einfachste Methode, die den gleichen Effekt der absoluten Zentrierung erzielen kann und außerdem die Verwendung variabler Gelenkhöhe unterstützt. Die Inhaltsblockdefinition transform: Translate(-50%,-50%) muss vom Browserhersteller vorangestellt werden und

top: 50% left: 50%;

Codetyp:

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

Vorteile:

1. Variable Inhaltshöhe

Nachteile:

1 nicht unterstützt

2. Attribute müssen das Browser-Herstellerpräfix schreiben

3 Es kann andere Transformationseffekte beeinträchtigen

4 verschwommene Darstellung von Elementgrenzen

Weitere Informationen zur Transformationsimplementierung und Zentrierung finden Sie im CSS-Tricks-Artikel „Centering PercentageWidth/Height Elements“

Table-Cell

Im Allgemeinen ist dies wahrscheinlich der beste Weg, um eine Zentrierung zu erreichen, da sich die Höhe des Inhaltsblocks mit der Höhe des tatsächlichen Inhalts ändert und auch die Browserkompatibilität gut ist. Der größte Nachteil besteht darin, dass viel zusätzliches Markup erforderlich ist und drei Elementschichten erforderlich sind, um das innerste Element zu zentrieren.

HTML:

CSS:

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>

Vorteile:

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}

1. Inhaltsüberlauf erweitert das übergeordnete Element.

3. Gute Cross-Browser-Kompatibilität.

Nachteile:

Erfordert zusätzliche HTML-Tags

12. Inline-Block

ist eine sehr beliebte Möglichkeit, eine Zentrierung zu erreichen. Die Grundidee besteht darin, display: inline-block, Vertical-align: middle und ein Pseudoelement zu verwenden, um den Inhaltsblock in der Mitte des Containers zu platzieren. Wenn die Breite des Inhaltsblocks größer ist als die Breite des Containers, beispielsweise wenn ein langer Text platziert wird, darf die Breite des Inhaltsblocks 100 % des Containers minus 0,25 em nicht überschreiten, andernfalls Das Pseudoelement: after wird verwendet, um den Inhaltsblock an den oberen Rand des Containers zu quetschen, indem :before verwendet wird, um den Inhaltsblock um 100 % nach unten zu verschieben.

Wenn Ihr Inhaltsblock so viel horizontalen Platz wie möglich einnehmen muss, können Sie max-width: 99 % (für größere Container) oder max-width: calc(100 % -0,25em) (abhängig) verwenden abhängig von unterstützten Browsern und Containerbreite).

HTML:

CSS:

<div class="Center-Container is-Inline">  
  <div class="Center-Block">  
    <!-- CONTENT -->  
  </div>  
</div>

Die Vor- und Nachteile dieser Methode ähneln denen der Table-Cell-Methode . Entfallen, da es sich tatsächlich um eine Hack-Methode handelt. Dies ist jedoch eine sehr beliebte Verwendung und wird von Browsern gut unterstützt.

Vorteile:

.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: '';  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  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+ */   
}

1. Variable Höhe

2.

3. Unterstützt Cross-Browser und ist auch für IE7 geeignet.

Nachteile:

Erfordert einen Container

2. Die horizontale Zentrierung basiert auf dem linken Rand: -0,25em; diese Größe muss für verschiedene Schriftarten angepasst werden Größen.

3. Die Breite des Inhaltsblocks darf 100 % des Containers nicht überschreiten – 0,25 em.

Flexbox

Dies ist der zukünftige Trend des CSS-Layouts. Flexbox ist ein neues Attribut in CSS3. Es wurde ursprünglich entwickelt, um häufige Layoutprobleme wie die vertikale Zentrierung zu lösen. Denken Sie daran, dass Flexbox nicht nur zum Zentrieren dient, sondern auch zum Teilen von Spalten oder zum Lösen einiger verrückter Layoutprobleme verwendet werden kann.

Vorteile: 1. Die Breite und Höhe des Inhaltsblocks sind beliebig und er läuft elegant über.

2. Kann in komplexeren und fortgeschritteneren Layouttechniken verwendet werden.

Nachteile:

1. IE8/IE9 unterstützt es nicht.

2. Body erfordert bestimmte Container und CSS-Stile.

3. Code, der auf modernen Browsern ausgeführt wird, erfordert das Browser-Herstellerpräfix.

4. Es kann zu Leistungsproblemen kommen

Vorschläge:

Jede Technologie hat ihre Vor- und Nachteile. Für welche Technologie Sie sich entscheiden, hängt von den unterstützten Browsern und Ihrer Codierung ab. Nutzen Sie die Vergleichstabelle oben als Entscheidungshilfe.

Als einfache Alternative eignet sich die Absolute Centering-Technik gut. Wo Sie früher negative Ränder verwendet haben, können Sie jetzt stattdessen die absolute Zentrierung verwenden. Sie müssen sich nicht mehr mit lästigen Randberechnungen und zusätzlichem Markup herumschlagen und können auch die Größe und Zentrierung von Inhaltsblöcken ändern.

Wenn Ihre Website Inhalte mit variabler Höhe erfordert, können Sie zwei Methoden ausprobieren: Table-Cell und Inline-Block. Wenn Sie auf dem neuesten Stand sind, probieren Sie Flexbox aus und erleben Sie die Vorteile dieser fortschrittlichen Layout-Technologie.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Vor- und Nachteile verschiedener Techniken zur Implementierung zentrierter Stile in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!