在前端網頁設計中，水平垂直居中是常見的需求。如何用 CSS 達成這個效果呢？ 我們先講一下水平居中。通常來講，水平居中可以通過以下兩種方式實現。 一、使用 line-height 這一種方式比較簡單，只需要設置父元素的 line-height 與 height 相等即可。例如：

這是一段要居中的文字

這里的 p 標簽就被設置成了居中的效果。 二、使用 flex 布局 flex 布局是現在最常用的布局方式，也是實現水平垂直居中最方便的方式之一。代碼如下：

這是一段要居中的文字

這里使用了一個 div 包裹了 p，通過設置 display: flex，justify-content: center; align-items: center 實現了水平垂直居中。 接下來我們再來探討一下垂直居中的實現方式。 一、使用 line-height 和水平居中一樣，使用 line-height 也是垂直居中的一種方式。不同的是，這里是將 line-height 的值設置成父元素的 height，而不是將兩者相等。例如：

這是一段要居中的文字

二、使用 flex 布局 flex 布局同樣可以實現垂直居中。只需將剛才的代碼略作修改即可：

這是一段要居中的文字

只需要加上一個 flex-direction: column; 就可以實現垂直居中。 到這里，我們就介紹完了 CSS 實現水平垂直居中的方法。希望對大家有所幫助。