CSS 居中且可滑動

.container {
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
}

現在，我們有一個容器，它被居中了，并且可以滾動。但是，我們需要在容器內添加更多內容。

.container {
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
}
.content {
width: 1000px; /* 寬度可以改變 */
}

我們添加了一個內容塊，并定義了其寬度。現在，如果內容超出容器的大小，用戶可以滾動以查看其它內容。

但是，我們可能希望在內容過少時，容器不要顯示滾動條。我們可以使用 JavaScript 來解決這個問題。

var container = document.querySelector('.container');
var content = document.querySelector('.content');
if (container.offsetHeight >= content.offsetHeight) {
container.style.overflowY = 'hidden';
}

我們檢查容器的高度是否大于內容的高度，如果是，則將容器的 overflow-y 設置為隱藏。