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