In diesem Artikel erfahren Sie, wie Sie ein Div horizontal und vertikal auf dem Bildschirm zentrieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
In letzter Zeit muss ich beim Schreiben von Webseiten oft das p auf dem Bildschirm zentrieren, deshalb habe ich ein paar gängige Methoden aufgezeichnet, die relativ einfach sind.
Fügen Sie einfach das Tag <center></center> hinzu, um es horizontal zu zentrieren, oder legen Sie margin:auto; fest. Natürlich können Sie auch die folgenden Methoden verwenden: Die folgenden beiden Nachfolgend werden die Methoden erwähnt: (Horizontale Zentrierung + vertikale Zentrierung) Methode <center></center>标签即可，或者设置margin:auto;当然也可以用下面的方法
下面说两种在屏幕正中（水平居中+垂直居中）的方法
放上示范的html代码：
<body> <p class="main"> <h1 id="MAIN">MAIN</h1> </p> </body>
- 方法一：
p使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。
.main{
text-align: center; /*让p内部文字居中*/
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}效果如图：
- 方法二：
仍然是绝对布局，让left和top都是50%，这在水平方向上让p的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
.main{
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}- 方法三：
对于水平居中，可以使用最简单的<center></center>标签，不过已经过时了，用法如下：
<p><center>123</center></p>
这个<center></center>标签就是相对于<p></p> Fügen Sie den Demonstrations-HTML-Code ein:
<p style="text-align:center;">123</p>
- Methode 1:
p Verwenden Sie das absolute Layout und legen Sie den -Rand fest :auto; Und setzen Sie die Werte von oben, links, rechts und unten auf gleich, nicht unbedingt alle auf 0.
Der Effekt ist wie im Bild gezeigt:
- Methode 2: Immer noch ein absolutes Layout, seien links und oben beide 50 % groß, wodurch der äußerste linke Teil von p und der äußerste linke Teil des Bildschirms in horizontaler Richtung 50 % voneinander entfernt sind , und das Gleiche gilt auch für die vertikale Richtung. Verwenden Sie also erneut die Transformation, um 50 % der eigenen Breite (Höhe) nach links (oben) zu verschieben, um einen zentrierten Effekt zu erzielen. Der Effekt ist der gleiche wie oben.
- Methode 3: 🎜 Für die horizontale Zentrierung können Sie das einfachste
<center></center>-Tag verwenden, aber es ist veraltet folgt:
<center></center>-Tag ist relativ zum Text im <p></p>-Tag, der zentriert werden kann. 🎜🎜Da das mittlere Tag veraltet ist, wird es nicht empfohlen, es auf formelle Weise zu verwenden. Sie können stattdessen die folgende Methode verwenden: 🎜rrreee🎜Empfohlenes Lernen: 🎜HTML-Video-Tutorial🎜🎜Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Div horizontal und vertikal auf dem Bildschirm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die Vielseitigkeit von HTML: Anwendungen und AnwendungsfälleApr 30, 2025 am 12:03 AMHTML ist nicht nur das Skelett von Webseiten, sondern wird auch in vielen Bereichen häufiger verwendet: 1. In der Webseitenentwicklung definiert HTML die Seitenstruktur und kombiniert CSS und JavaScript, um reichhaltige Schnittstellen zu erreichen. 2. In der Entwicklung der mobilen Anwendungen unterstützt HTML5 Offline -Speicher- und Geolokationsfunktionen. 3. In E -Mails und Newslettern verbessert HTML das Format- und Multimedia -Effekte von E -Mails. 4. In der Spielentwicklung wird die Canvas -API von HTML5 verwendet, um 2D- und 3D -Spiele zu erstellen.
Was ist das Root -Tag in einem HTML -Dokument?Apr 29, 2025 am 12:10 AMTheroottaginanhtmldocumentis.itServesasthetop-LevelelementthateCapsulatesAllotherContent, um ProperDocumentStructureandBrowserParsing zu gewährleisten.
Sind die HTML -Tags und Elemente dasselbe?Apr 28, 2025 pm 05:44 PMDer Artikel erklärt, dass HTML -Tags Syntaxmarker sind, die zum Definieren von Elementen verwendet werden, während Elemente vollständige Einheiten einschließlich Tags und Inhalt sind. Sie arbeiten zusammen, um Webseiten zu strukturieren.Character Count: 159
Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Apr 28, 2025 pm 05:43 PMDer Artikel erörtert die Rollen von & lt; Head & gt; und & lt; Körper & gt; Tags in HTML, ihre Auswirkungen auf die Benutzererfahrung und die SEO -Auswirkungen. Die ordnungsgemäße Strukturierung verbessert die Funktionen der Website und die Suchmaschinenoptimierung.
Was ist der Unterschied zwischen & lt; stark & gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PMDer Artikel erörtert die Unterschiede zwischen HTML -Tags, und sich auf ihre semantischen und präsentierenden Verwendungen und ihre Auswirkungen auf SEO und Barrierefreiheit konzentrieren.
Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Apr 28, 2025 pm 05:41 PMIn Artikel wird die Angabe der Charaktercodierung in HTML erläutert, die sich auf UTF-8 konzentriert. Hauptproblem: Sicherstellen, dass die korrekte Anzeige des Textes verstümmelt und die SEO und die Zugänglichkeit verbessert werden.
Was sind die verschiedenen Formatierungs -Tags in HTML?Apr 28, 2025 pm 05:39 PMIn dem Artikel werden verschiedene HTML -Formatierungs -Tags erörtert, die zur Strukturierung und Styling -Webinhalte verwendet werden, wodurch ihre Auswirkungen auf das Erscheinungsbild von Text und die Bedeutung semantischer Tags für Barrierefreiheit und SEO betont werden.
Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Apr 28, 2025 pm 05:39 PMDer Artikel erörtert die Unterschiede zwischen den Attributen von HTMLs "ID" und "Klasse" und konzentriert sich auf ihre Einzigartigkeit, ihren Zweck, ihre CSS -Syntax und ihre Spezifität. Es erklärt, wie sich ihre Verwendung auf das Webseite und die Funktionalität des Webseite auswirkt, und bietet Best Practices für
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
