So erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind-CSS-Tutorial-php.cn

So erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind

藏色散人

Freigeben： 2020-12-17 10:09:01

Original

2962 Leute haben es durchsucht

So erreichen Sie eine Zentrierung, wenn CSS-Breite und -Höhe nicht festgelegt sind: 1. Verwenden Sie Flex für das Layout, um eine Zentrierung zu erreichen. 2. Verwenden Sie „Transform“ in CSS3, um Elemente zu versetzen. 3. Verwenden Sie „Table-Cell“, um eine Zentrierung zu erreichen.

So erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „CSS-Video-Tutorial“

Wie erreicht man eine Zentrierung, wenn die Breite und Höhe von CSS nicht festgelegt sind?

Methode 1: Flex für das Layout verwenden

Jeder erste Reaktion könnte Flex sein. Weil die Schreibmethode einfach und intuitiv genug ist und es kein Kompatibilitätsproblem gibt. Es ist die erste Wahl für den Fokus auf Mobiltelefone.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Nach dem Login kopieren

Verwendet zwei Schlüsselattribute: justify-content und align-items. Beide sind auf „center“ eingestellt, um eine Zentrierung zu erreichen.

Es ist zu beachten, dass das Flex-Center hier am übergeordneten Element aufgehängt werden muss, um das einzige untergeordnete Element zu zentrieren.

Methode 2: Position + Transformation verwenden

Verwendet hauptsächlich Transformation in CSS3, um Elemente zu versetzen, und der Effekt ist sehr gut

Diese Methode ist sehr leistungsstark und flexibel und beschränkt sich nicht auf die Erzielung einer zentrierten Anzeige. Aus Kompatibilitätsgründen wird auch IE zum Vergleich verwendet. Die zweite Methode kann von IE8 und höher verwendet werden. In IE8 und niedriger treten Probleme auf.

<body>
    <div id="box">
        <div id="content">div被其中的内容撑起宽高</div>
    </div>        
</body>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;  
transform:translateX(-50%) translateY(-50%); 
-webkit-transform:translateX(-50%) translateY(-50%); }

Nach dem Login kopieren

Methode 3: Tabellenzelle verwenden

Verwenden Sie den Zellenzentrierungseffekt der Tabelle zur Anzeige. Wie Flex muss es auf das übergeordnete Element geschrieben werden.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!