App下載

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

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

我們?cè)陂_(kāi)發(fā)網(wǎng)頁(yè)時(shí)，有時(shí)候需要設(shè)定 div 居頁(yè)面中間顯示，這個(gè)功能如何實(shí)現(xiàn)呢？那么這篇文章告訴你 CSS 如何設(shè)置 div 居中顯示。

方法一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>設(shè)置div放置在頁(yè)面中央- 編程獅(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>

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

設(shè)置div放置在頁(yè)面中央

方法二


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

此方法通過(guò)設(shè)定 div 的定位為固定定位，然后分別設(shè)置上下左右。進(jìn)而使得整個(gè) div 居中顯示。具體效果如下：

設(shè)置div放置在頁(yè)面中央

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

CSS

0 人點(diǎn)贊