如何讓div在頁(yè)面滾動(dòng)時(shí)保持居中？ div設(shè)置滾動(dòng)條位置
Coupang精選控跨境問(wèn)答2025-07-117020
要讓div在頁(yè)面滾動(dòng)時(shí)保持居中，可以使用CSS的position: fixed;屬性。這樣，無(wú)論頁(yè)面如何滾動(dòng)，div都會(huì)保持在固定的位置。以下是一個(gè)簡(jiǎn)單的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中滾動(dòng)的div</title>
<style>
#centeredDiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: lightblue;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="centeredDiv">
這是一個(gè)居中的div。
</div>
</body>
</html>在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為centeredDiv的div，并使用position: fixed;使其固定在頁(yè)面上。然后，我們使用top: 50%;和left: 50%;將div相對(duì)于其原始位置（即屏幕中心）進(jìn)行平移。最后，我們使用transform: translate(-50%, -50%);將其相對(duì)于其父元素（即body）進(jìn)行平移。
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Coupang精選控
