燈箱在網頁設計中經常被用來展示圖片或文字內容，給用戶帶來更好的視覺效果。本篇文章將介紹如何使用CSS來設置一個簡易的燈箱。

/*HTML結構*/
<div class="lightbox">
<div class="lightbox-inner">
<img src="image.jpg">
</div>
</div>
/*CSS設置*/
.lightbox {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
display: none;
}
.lightbox-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lightbox img {
max-width: 100%;
max-height: 80%;
}
.lightbox.show {
display: block;
}

首先，HTML中定義一個class為lightbox的div容器，其中再放置一個class為lightbox-inner的div容器，用于顯示圖片或文字內容。CSS中設置以上兩個容器的樣式：fixed定位，占據整個頁面，設置半透明黑色背景，設置z-index，display屬性默認為none不顯示。其中，控制圖片（或內容）居中顯示的樣式是position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)。

當用戶點擊圖片（或內容）時，使用JavaScript控制class為lightbox的div容器的display屬性為block，即顯示燈箱效果。