So zentrieren Sie die Anzeige von CSS-Div-CSS-Tutorial-php.cn

So zentrieren Sie die Anzeige von CSS-Div

coldplay.xixi

Freigeben： 2023-01-03 09:29:18

Original

52588 Leute haben es durchsucht

So zentrieren Sie die CSS-Div: 1. Verwenden Sie die absolute absolute Positionierung, der Code lautet [
absolute Mittelpositionierung] 2. Verwenden Sie die Positionierung des Randes, um sie zu zentrieren. 4. Verwenden Sie die feste Mittelpositionierung.

So zentrieren Sie die Anzeige von CSS-Div

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So zeigen Sie CSS-Div in der Mitte an:

1. Absolute Positionierung Dies ist die am häufigsten verwendete Methode zur zentrierten Positionierung. Derzeit müssen Browser auf dem Markt dies unterstützen Schreibmethode

<html>
    <head>
        <meta charset="UTF-8">
        <title>absolute居中定位</title>
        <style>
          *{margin:0;padding:0}
          .absoluteCenter{ width:600px; height:400px;position:absolute; background: rgb(50,183,97); left:50%; top:50%; margin-left: -300px; margin-top: -200px;  }
        </style>
    </head>
    <body>
        <div>我是absolute居中定位</div>
    </body>
    </html>

Nach dem Login kopieren

2. Übersetzen Sie die Positionierung. Dies ist das Attribut der CSS3-Transformation, das einen großen Vorteil hat. Sie müssen die Breite und Höhe des Div nicht kennen In js können Sie die Breite und Höhe als Prozentsatz festlegen. IE-Browser unterstützt keine bessere Verwendung auf der mobilen Seite. Der Rand ist zentriert und positioniert. Es ist nicht erforderlich, die Breite und Höhe des Div zu bestimmen sodass oben, unten, links und rechts alle 0 sind. Margin:auto hinzufügen Die Navigationsleiste ist zentriert und scrollt nicht mit der Seite

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>translate居中定位</title>
        <style>
        　　*{margin:0;padding:0}
        　　.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}
        </style>
    </head>
    <body>
        <div>我是translate居中定位</div>
    </body>
    </html>

Nach dem Login kopieren

Empfohlene verwandte Tutorials:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Anzeige von CSS-Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!