我們?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)效果如下：
方法二
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 居中顯示。具體效果如下：
以上就是文章“ CSS 如何設(shè)置 div 居中顯示？附兩種方法！”的全部?jī)?nèi)容。更多 CSS 學(xué)習(xí)請(qǐng)關(guān)注 w3cschool 官網(wǎng)。
