So legen Sie die Mittenausrichtung in CSS fest

So legen Sie die zentrierte Ausrichtung in CSS fest: 1. Horizontale Zentrierung durch „text-align:center“ oder „margin:vertical auto;“; 2. Vertikale Zentrierung durch „line-height“ 3. Durch „elastisches Layout“ erreichen horizontale und vertikale Zentrierung und so weiter.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

css – Methode zur zentrierten Ausrichtung

• text-align:center – horizontale Zentrierung

gilt nur für Inline-Elemente wie Text, Bilder, Schaltflächen (Anzeige ist auf Inline oder eingestellt). Inline-Block usw.) für horizontale Zentrierung

• margin: vertikal automatisch; —— Horizontale Zentrierung

Nur horizontale Zentrierung und ist für die Positionierung schwebender Elemente ungültig

 .father{
           width:500px;
           height:200px;
           background-color::#f98769;
           overflow:hidden;//不可缺少否则margin-top不生效       }
        .son{
            width: 100px;
            height: 100px;
            margin:50px auto ;
            background-color: #ff0000;
        }

• Linienhöhe —— Vertikale Zentrierung

line-height=height, nur gültig für eine Textzeile

• Tabelle verwenden – horizontale und vertikale Zentrierung

Die Attribute align='center' und valign='middle' von td/th können horizontal und vertikal zentriert sein.

• Flexibles Layout – horizontale und vertikale Zentrierung :table-cell Simulieren wir es als Tabellenzelle

• .father{display:flex;justity-content:center;align-items:center;}.father{display:flex;flex-direction:column;//改变主轴为cross axisjustity-content:center;}

  Nach dem Login kopieren

Pseudoelementmethode - Vertikale Zentrierung

• .father{
      height:300px;
      background:#ccc;
      display:table-cell; /*IE8以上及Chrome、Firefox*/
      vertical-align:middle; /*IE8以上及Chrome、Firefox*/
      text-align:center;
   }
   .son{
   display:inline-block;//或是inline }

  Nach dem Login kopieren
  
  Für detailliertere HTML-/CSS-Kenntnisse besuchen Sie bitte die css Video-Tutorial Kolumne!

  Das obige ist der detaillierte Inhalt vonSo legen Sie die Mittenausrichtung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!