對于一些頁面框架搭建，我們經常需要將頁面元素居中，其中CSS總體居中是比較常見和常用的一種方法，下面分享一下CSS總體居中的實現方式。

/*HTML*/
<div class="container">
<div class="center">
<h2>CSS總體居中</h2>
<p>這是一段文字。</p>
</div>
</div>
/*CSS*/
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.center {
width: 80%;
text-align: center;
}

以上代碼中，我們將最外層的div設為flex容器，通過justify-content: center;和align-items: center;將容器內的元素水平垂直居中，實現了CSS總體居中的效果。值得注意的是，這種方法也對內部元素進行了居中操作，需要對內部元素適當設置，如上述代碼中設置了.center元素的寬度，使文字和其他內容在容器內水平居中顯示。

需要提醒大家的是，在使用CSS總體居中時，我們要考慮到瀏覽器兼容性問題，盡可能使用各種瀏覽器都支持的CSS屬性和特性，另外，還需要注意在頁面響應式設計的時候，要考慮到不同屏幕尺寸下的顯示效果。