CSS方塊中間空白效果是一種常見的設計技巧，它可以使頁面看起來更加美觀、整潔。通過合理的運用CSS樣式，我們可以輕松地實現這種效果。

.box{
width: 200px;
height: 200px;
background-color: #f00;
margin: 50px auto;
position: relative;
}
.box:before{
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #fff;
z-index: -1;
}

上面的代碼中，我們定義了一個名為"box"的div元素，它有200x200像素的寬度和高度，紅色背景色以及50像素的上下邊距和水平居中的位置。我們還定義了一個偽元素":before"，用于實現中間空白的效果。該元素在.box元素之前渲染，并且z-index設為-1，則使該元素置于元素下面。

我們設置":before"的寬度為100%，這樣它可以填充整個元素。同時，我們將它的高度設為1像素，并定義白色背景色，這樣它就成為了一個細長的白線。

最后，我們將它的位置設置為絕對位置，并讓它垂直居中于.box元素的中間位置。

使用上面的代碼，我們可以輕松地實現CSS方塊中間空白效果。通過調整偽元素的高度和背景色，我們可以實現不同的效果并應用于不同的場景中。