Heim  >  Artikel  >  Web-Frontend  >  So erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind

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

藏色散人
藏色散人Original
2020-12-17 10:09:012897Durchsuche

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;
}

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%); }

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;
}

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So verwenden Sie CSS3 PieNächster Artikel:So verwenden Sie CSS3 Pie