在Web開發中，經常會遇到這樣一個需求：需要讓一個頁面元素的左右兩邊固定，中間部分可以根據內容的長度而自適應寬度。在這種情況下，可以使用CSS來實現。

首先，我們需要將頁面元素的左側和右側固定。這可以通過設置元素的position屬性為absolute，并分別設置left和right屬性來實現。例如：

.container {
position: relative;
height: 50px;
}
.fixed-left {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200px;
background-color: #ccc;
}
.fixed-right {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 200px;
background-color: #ddd;
}

在上面的代碼中，我們創建了一個名為container的父級容器，并將其設置為相對定位。然后，我們創建了兩個子元素fixed-left和fixed-right，并將它們設置為絕對定位，并設置了left和right屬性以將它們固定在頁面左側和右側。

現在，我們需要讓頁面元素的中間部分可以根據內容長度自適應寬度。這可以通過設置left和right屬性的值為固定寬度的和。例如，如果我們需要中間部分的寬度為 800px，則左側元素的寬度應該為 200px，右側元素的寬度應該為 200px，而中間部分的left和right屬性分別應該設置為 200px。如下所示：

.middle {
position: absolute;
left: 200px;
right: 200px;
top: 0;
height: 100%;
background-color: #eee;
}

在上面的代碼中，我們創建了一個名為middle的子元素，并將其設置為絕對定位。我們將left和right屬性的值都設置為 200px，這樣中間部分的寬度就會根據內容的長度而自適應。

現在，我們需要讓頁面元素的中間部分可以縱向居中。這可以通過設置中間部分的display屬性為flex，并將其align-items屬性設置為center來實現。例如：

.middle {
display: flex;
align-items: center;
}

現在，我們已經成功地實現了左右兩側固定，中間根據內容長度自適應寬度且縱向居中的頁面元素。