一、背景 在網頁制作中，經常需要用到提示框，用來向用戶展示一些重要的信息，比如輸入框校驗、確認框等等。提示框的位置通常設計為居中，讓用戶易于識別和理解。 二、實現方法 要實現居中的提示框，我們需要借助CSS的布局特性。以下是具體步驟： 1. 給提示框設置固定寬度和高度，這樣方便我們計算位置。 2. 使用absolute屬性將提示框定位在父元素中心。 3. 如果需要讓提示框在窗口大小改變時仍然保持居中，可以使用@keyframes和animation屬性設置動畫。 下面是示例代碼：

p {
position: relative;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-top: -100px;
margin-left: -150px;
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
animation: popup 0.5s ease-in-out forwards;
}
@keyframes popup {
from {
transform: translate(-50%, -50%) scale(0);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}

三、結論 通過以上的CSS布局方式，我們能夠輕松地實現一個居中的提示框，讓我們的網頁更加美觀和易用。希望此篇文章對大家學習CSS有所幫助！