溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

div在屏幕中怎么實現(xiàn)水平居中和垂直居中

發(fā)布時間：2021-04-26 09:58:33 來源：億速云 閱讀：265 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了div在屏幕中怎么實現(xiàn)水平居中和垂直居中，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

最近寫網(wǎng)頁經(jīng)常需要將p在屏幕中居中顯示，遂記錄下幾個常用的方法，都比較簡單。
水平居中直接加上<center>標簽即可，或者設(shè)置margin:auto;當(dāng)然也可以用下面的方法

下面說兩種在屏幕正中（水平居中+垂直居中）的方法
放上示范的html代碼：

<body>
	<p class="main">
		<h2>MAIN</h2>
	</p>
</body>

  • 方法一：

p使用絕對布局，設(shè)置margin:auto;并設(shè)置top、left、right、bottom的值相等即可，不一定要都是0。

.main{
	text-align: center; /*讓p內(nèi)部文字居中*/
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

效果如圖：
div在屏幕中怎么實現(xiàn)水平居中和垂直居中

  • 方法二：
    仍然是絕對布局，讓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>標簽，不過已經(jīng)過時了，用法如下：

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

這個<center>標簽就是相對于<p>標簽里的文字，可以使其居中。

由于center標簽已經(jīng)過時了，所以正規(guī)一點的話還是不建議使用的，可以使用如下的方式代替：

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“div在屏幕中怎么實現(xiàn)水平居中和垂直居中”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手