CSS是網頁開發中不可或缺的一部分，通過CSS樣式的設置，我們可以使網頁更加美觀、易讀。在網頁排版中，我們經常需要將某些元素居中顯示。但是，如何讓這些元素距離頁面的上下左右留出一定的空隙呢？下面，就讓我們來介紹一下CSS中間怎么空出距離的方法。

//HTML
<div class="box">
<p>這是一個居中顯示的段落。</p>
</div>
//CSS
.box {
width: 300px;
height: 200px;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
}

在上面的代碼中，我們通過設置盒子的寬度和高度來確定盒子的大小，然后通過設置背景顏色來讓盒子更加美觀。接下來，就是利用CSS的彈性盒子布局來讓文本居中顯示。

首先，在盒子的CSS樣式中，我們將display屬性設置為flex，這樣就可以開啟彈性盒子布局。然后，我們使用justify-content和align-items屬性來分別設置盒子內元素的垂直和水平對齊方式。在這里，我們將兩個屬性都設置為center，這樣就可以讓盒子內的元素居中顯示。

總結一下，想要讓元素居中顯示并距離頁面留出一定的空隙，可以使用CSS的彈性盒子布局。在盒子的CSS樣式中，將display屬性設置為flex，然后使用justify-content和align-items屬性分別設置元素的水平和垂直對齊方式，最后就可以實現元素的居中顯示。