So zentrieren Sie ein Div horizontal und vertikal auf dem Bildschirm-HTML-Tutorial-php.cn

So zentrieren Sie ein Div horizontal und vertikal auf dem Bildschirm

醉折花枝作酒筹

Freigeben： 2021-04-25 18:25:24

nach vorne

5053 Leute haben es durchsucht

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.

So zentrieren Sie ein Div horizontal und vertikal auf dem Bildschirm

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>MAIN</h1>
	</p>
</body>

Nach dem Login kopieren

方法一：

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

Nach dem Login kopieren

效果如图：

方法二：
仍然是绝对布局，让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%);
}

Nach dem Login kopieren

方法三：
对于水平居中，可以使用最简单的<center>标签，不过已经过时了，用法如下：

<p><center>123</center></p>

Nach dem Login kopieren

这个<center>标签就是相对于 Fügen Sie den Demonstrations-HTML-Code ein:

<p style="text-align:center;">123</p>

Nach dem Login kopieren

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.

rrreeeDer 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.

rrreee

Methode 3: 🎜 Für die horizontale Zentrierung können Sie das einfachste <center></center>-Tag verwenden, aber es ist veraltet folgt:

rrreee🎜Dieses <center></center>-Tag ist relativ zum Text im -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!