App下載

CSS如何設置div居中顯示？附兩種方法！

猿友 2021-05-11 14:00:46 瀏覽數(shù) (7823)
反饋

我們在開發(fā)網(wǎng)頁時，有時候需要設定 div 居頁面中間顯示，這個功能如何實現(xiàn)呢？那么這篇文章告訴你 CSS 如何設置 div 居中顯示。

方法一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>設置div放置在頁面中央- 編程獅(w3cschool.cn)</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: red;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

此方法中，如果沒有設置 transform 屬性，那么整個 div 將以左上點的位置居中于整個頁面中央。設置 transform 后，中點的位置變?yōu)?div 的中心點。具體實現(xiàn)效果如下：

設置div放置在頁面中央

方法二


div{
			background-color: black;
			height: 50%;
			width: 50%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}

此方法通過設定 div 的定位為固定定位，然后分別設置上下左右。進而使得整個 div 居中顯示。具體效果如下：

設置div放置在頁面中央

以上就是文章“ CSS 如何設置 div 居中顯示？附兩種方法！”的全部內(nèi)容。更多 CSS 學習請關(guān)注 w3cschool 官網(wǎng)。

CSS

0 人點贊