CSS是一種用來控制網頁樣式的語言，常用的樣式屬性之一就是居中。居中有很多種，本文將介紹如何垂直水平居中。 平面元素水平居中 實現水平居中有幾種方法，分別介紹如下。 1. text-align text-align是一個用于設定文本水平對齊方式的屬性，可以用于居中元素。例如我們可以使用以下代碼實現垂直居中： ```css .parent { text-align: center; } .child { display: inline-block; } ``` 2. margin margin是一個元素的外邊距，我們可以使用margin來居中元素。比如，我們可以使用以下代碼實現垂直居中： ```css .parent { text-align: center; } .child { display: inline-block; margin: 0 auto; } ``` 元素垂直居中 實現垂直居中有幾種方法，分別介紹如下。 1. line-height 可以通過line-height屬性來實現垂直居中。當一個元素的line-height屬性和它的高度一樣時，可以讓它們在中線上對齊。下面是代碼示例： ```css .parent { height: 100px; line-height: 100px; text-align: center; } .child { display: inline-block; } ``` 2. flexbox flex布局是CSS中強大的一種布局方式，可以用于垂直和水平居中。可以使用以下代碼實現元素的垂直和水平居中： ```css .parent { display: flex; justify-content: center; align-items: center; height: 100px; } .child { display: inline-block; } ``` 這是最簡單的方法，同時還支持在元素中間添加內容。 以上就是關于使用CSS如何垂直和水平居中的方法。可根據實際情況選擇使用哪種方法。預祝你碼出心儀的網頁樣式！