CSS是一種廣泛應用于網頁設計的樣式表語言。能夠實現彈出居中小頁面，使網頁更加美觀、實用。本文將介紹如何使用CSS實現彈出居中小頁面的方法。

首先，在HTML中定義彈出居中小頁面的基本結構：

<div class="popup">
<div class="popup-content">
<!-- 內容 -->
</div>
</div>

然后，在CSS中設置彈出居中小頁面的樣式：

.popup {
display: none; /*默認隱藏*/
position: fixed; /*相對于屏幕固定位置*/
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /*半透明黑色遮罩*/
z-index: 999; /*層級最高*/
}
.popup-content {
position: absolute;
top: 50%; /*距離頂部50%*/
left: 50%; /*距離左側50%*/
transform: translate(-50%, -50%); /*通過translate屬性實現居中*/
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

最后，在JavaScript中設置彈出居中小頁面的事件：

var popup = document.querySelector('.popup');
var popupContent = document.querySelector('.popup-content');
function openPopup() {
popup.style.display = 'block';
}
function closePopup() {
popup.style.display = 'none';
}
popup.addEventListener('click', function(e) {
if (e.target === popup) {
closePopup();
}
});

通過實現以上的代碼，即可實現彈出居中小頁面的功能。根據實際需求，可以調整樣式、內容以及事件等，達到更好的效果。