CSS是網(wǎng)頁設計中不可缺少的一部分，在元素樣式的設計中，垂直居中是常見的需求。下面介紹幾種CSS寫垂直居中的方法。 1. 使用flexbox 使用flexbox是CSS3推出的一種新技術，可以方便的實現(xiàn)水平和垂直居中。 ``` .container { display: flex; align-items: center; justify-content: center; } ``` 此時，子元素可以通過設置寬高并設置margin:auto來進行垂直居中。 2. 使用table-cell 使用display: table-cell和vertical-align: middle結合可以輕松實現(xiàn)垂直居中： ``` .container { display: table-cell; vertical-align: middle; } ``` 注意：父元素也必須設置display:table或者display:inline-table。 3. 使用position 使用position: absolute和transform: translateY(-50%)可以實現(xiàn)垂直居中。 ``` .container { position: relative; } .content { position: absolute; top: 50%; transform: translateY(-50%); } ``` 此時，父元素需要設置position:relative。 以上幾種方法都可以輕松實現(xiàn)垂直居中，選擇合適的方法可以極大提高效率，減少編碼時間。