在網頁設計中，彈框是一個常見的元素。它可以用來吸引用戶的注意力、展示重要信息、提供交互功能等。下面是一個基于HTML和CSS的屏幕中間彈框代碼示例。 首先，我們需要一個包含彈框內容的HTML結構。以下是一個簡單的示例：

<div class="popup">
<div class="popup-header">
<h2>標題</h2>
<a class="popup-close" href="#">關閉</a>
</div>
<div class="popup-content">
<p>這里是彈框內容。</p>
</div>
</div>

在這個結構中，我們使用一個class為“popup”的<div>元素作為整個彈框的容器。它包含一個class為“popup-header”的<div>元素，用于顯示標題和關閉按鈕。<div class="popup-content"> 則用于顯示彈框的具體內容。 接下來，我們需要使用CSS樣式定義彈框的樣式和位置。以下是一個基本的樣式示例：

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.popup-header {
display: flex;
justify-content: space-between;
}
.popup-header h2 {
margin: 0;
}
.popup-header .popup-close {
cursor: pointer;
}
.popup-content {
margin-top: 10px;
}

在這個CSS樣式中，我們首先將彈框的位置設置為相對于瀏覽器窗口的固定位置。然后，使用transform屬性將其水平垂直居中。 接下來，我們定義了彈框的寬度、內邊距、背景色和陰影等屬性。然后，我們定義了彈框頭部和內容部分的樣式。 最后，我們在JavaScript中使用事件監聽器，為關閉按鈕添加click事件處理程序。以下是一個基本的JavaScript示例：

var closeButton = document.querySelector('.popup-close');
var popup = document.querySelector('.popup');
closeButton.addEventListener('click', function() {
popup.style.display = 'none';
});

在這個JavaScript代碼中，我們首先選擇關閉按鈕和彈框元素，并使用addEventListener()方法將click事件處理程序添加到關閉按鈕上。 當用戶單擊關閉按鈕時，事件處理程序將使用style.display屬性將彈框元素的顯示設置為“none”，從而將其隱藏。 以上是一個基于HTML和CSS的屏幕中間彈框代碼示例。您可以使用這個示例作為起點，根據您的具體需要進行修改和擴展。