在頁面布局中，垂直居中是一個讓人感到困惑的問題。要實現垂直居中，需要在許多層級中使用復雜的計算和操作。但是，隨著彈性布局的出現，垂直居中問題得到了解決。

.container {
display: flex;
align-items: center;
justify-content: center;
}

上面的CSS代碼可以讓容器內的元素垂直居中。這是因為彈性布局（flexbox）的屬性可以控制容器內部元素的對齊方式和分布。

在這個例子中，display屬性設置為 flex，將容器設置為一個彈性容器。align-items屬性設置為 center，使容器內元素沿著垂直方向居中對齊。justify-content屬性設置為 center，使容器內元素沿著水平方向居中對齊。

另外，彈性布局還可以通過其他屬性來控制垂直居中，如align-self、flex-direction等屬性。利用彈性布局可以輕松地實現頁面布局，同時又不必擔心麻煩的計算問題。

.item {
align-self: center;
/*此處省略其他屬性*/
}

上面的CSS代碼可以讓容器內的單個元素垂直居中。通過設置align-self屬性為 center，可以讓該元素在容器內與其他元素垂直居中。

總之，利用彈性布局可以很方便的實現垂直居中。這種布局方式不僅方便，而且兼容性良好，可以被大部分瀏覽器所支持。