In diesem Artikel werden hauptsächlich die 7 Möglichkeiten zur horizontalen und vertikalen Zentrierung des Containers vorgestellt. Interessierte Freunde können sich auf diese Art von CSS-Layout beziehen Davon gibt es ziemlich viele, und es ist auch eine Frage, die oft in Interviews auftaucht. Sie werden viele davon finden, wenn Sie online suchen, aber ich möchte sie trotzdem selbst zusammenfassen.
Methoden dieser Art gibt es viele. Dieser Artikel fasst nur einige davon zusammen, um den Eindruck zu vertiefen.Die Darstellungen sehen alle so aus:
Position plus Rand
Inhalt in die Zwischenablage kopieren
p Klasse ="wrap">
p class="center">p>
p>
Inhalt in die Zwischenablage kopieren
.wrap { width: 200px; height: 200px; background : gelb; Position: } .wrap .
Mitte: 100px; Höhe: 100px; Hintergrund; 🎜>Rand: Auto; Absolut; Rechtsrechts: 0; oben: 0; untenunten: 0; 🎜>Kompatibilität: unterstützt von alle gängigen Browser, aber nicht unterstützt von IE6Methode 2: diaplay:table-cell
XML/HTML-Code
p class=
"wrap"
p class= "center">
pp> >
Inhalt in die Zwischenablage kopieren/*/
.wrap{200px
;200px
;
: Anzeige: Tabellenzelle; align
:text-align: center;
} .center{ display: inline-block; vertikal-align: Mitte; Breite: Höhe: 100px; : grün; }
Der Grund für display:table-cell ist, dass IE67 nicht kompatibel ist
Position plus Transformation
XML/HTML-Code Inhalt in die Zwischenablage kopieren
p
class> <p
Klasse> p> >p>
CSS-CodeInhalt in die Zwischenablage kopieren
:
relativ
Hintergrund: gelb; Breite
:Höhe: 200px;} .Mitte { Position: absolut; Hintergrund : grün; oben:50%; links:50%; -webkit-transform:translate(-50%,-50%); (-50%,-50%); Breite: 100px; Höhe: 100px; Kompatibilität: IE9 und niedriger unterstützen Transform nicht, aber die mobile Version bietet eine bessere Leistung. Methode 4: flex;align-items: center;justify-content: centerXML/HTML-Code
<p class
="wrap"
<
class=
"center"p> p>
Inhalt in die Zwischenablage kopieren /* css */ .wrap { Hintergrund: Gelb; Breite: 200px; height; display: center; -Inhalt: Mitte; Breite: 100px; ; } Mobile Version bevorzugt play :flex;margin:auto XML/HTML Code Inhalt in die Zwischenablage kopieren <p >
=
<p class="center">
< ;/> ; p>
CSS-CodeInhalt in die Zwischenablage kopieren
Hintergrund
:
; Breite: 200px;
Höhe: Breite; Höhe: 100px; Rand: auto; }
Die bevorzugte Methode für mobile Endgeräte Sechs: Reine Position XML/HTML-CodeInhalt in die Zwischenablage kopieren
p
"wrap"
> 🎜>p
class
"center">
>
p>
CSS-CodeInhalt in die Zwischenablage kopieren
/* css */ .wrap { Hintergrund: Gelb; Breite: 200px; Höhe: 200px; Position: relativ;
} /**Methode 1**/ .Mitte { Hintergrund: grün; Position: absolut; Breite: 100px; Höhe: 100px; links: 50px; oben: 50px;
} /**Methode 2**/ .Mitte { Hintergrund: grün; Position: absolut; Breite: 100px; Höhe: 100px; links: 50 %; oben: 50 %; Rand links:-50px; margin-top:-50px;
}
兼容性:适用于所有浏览器
方法六中的方法一计算公式如下:
子元素(conter)的left值计算公式:left=(父元素的宽 - 子元素的宽) / 2=(200-100) / 2=50px ;
子元素(conter)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;
方法二计算公式:
left值固定为50%;
子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;
top值也一样,固定为50%
子元素的margin-top= -(子元素的高/2)=-100/2= -50px;
方法七:兼容低版本浏览器,不固定宽高
XML/HTML-Code复制内容到剪贴板
<p Klasse="Tabelle">
<p Klasse="tableCell">
<S class="content">不固定宽高,自适应p>
p>
p>
CSS-Code复制内容到剪贴板
/* css*/ .table { height: 200px;/*高度值不能少*/ width: 200px;/*宽度值不能少*/ display: table; Position: relativ; schweben:links; Hintergrund: gelb;
} .tableCell { display: table-cell; vertikal-align: middle; 🎜>text-align: center; :
10px*top: 50%; 🎜>links: 50%; 🎜>inhalt { 🎜>:relativ; 🎜>links
: -50%;grün; 🎜>
Zusammenfassung
, das heißt, verwenden Sie align-items: center; >XML/HTML-Code
Inhalt in die Zwischenablage kopieren
<
p="wrap">
=
"center"p
> p
Inhalt in die Zwischenablage kopieren
/* css */ .wrap {
Hintergrund; Breite: Höhe: 200px: flex; Elemente: Mitte; Rechtfertigung-
Inhalt} .Mitte { Hintergrund: grün; Breite: 100px; Höhe: 100px ;
oder display:flex;margin:auto;
Inhalt in die Zwischenablage kopieren
<p class="wrap"> ="center">< /p>
p > 🎜>
CSS-CodeInhalt in die Zwischenablage kopieren
/* css */ .wrap { Hintergrund: Gelb; Breite: Höhe: 200px; Anzeige : flex;
{ >: 100px; Höhe: 100px; Marge: automatisch; }
Wenn es sich um einen PC handelt, muss die Kompatibilität berücksichtigt werden. Methode sechs ist gut, das heißt reine Position.
Inhalt in die Zwischenablage kopieren
p
class> ="center">< /
> p > 🎜>CSS-Code
/ * css */ .wrap { Hintergrund
:Breite
:200px
;
: relativ; Hintergrund:
grün: absolut; Breite: 100px ; Höhe; links: 50px; oben: 50px;
} /**Methode 1**/.Mitte { Hintergrund: grün; Position: absolut; Breite: Höhe: 100px: 50 %; 🎜>oben: 50 %; Rand links:- 50px; Rand-oben:-50px
;Wenn die Höhe des mittleren Elements auf der PC-Seite nicht festgelegt ist, verwenden Sie einfach Methode sieben, und der Code wird nicht kopiert.
Das obige ist der detaillierte Inhalt von7 Möglichkeiten, Container mit CSS horizontal und vertikal zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!