在CSS中，讓一個元素垂直居中一直是一個令人頭疼的問題。雖然實現方式有很多種，但其中有幾種是最經典的方法。下面我們將詳細介紹如何使用這些方法來垂直居中元素。 方法一：使用Flexbox CSS Flexbox 是一個強大的技術，可以讓容器內的子元素以與傳統布局相比更靈活的方式布局。使用Flexbox布局，可以輕松地使子元素水平和垂直居中。 .container { display: flex; align-items: center; justify-content: center; } 方法二：使用絕對定位 使用絕對定位是另一種常用的方法，可以將元素相對于其父容器垂直居中。實現時需要為父容器設置position:relative，為子元素設置 position:absolute 和 top:50%，然后使用 transform:translateY(-50%)將元素向上移動它的高度的一半。 .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } 方法三：使用表格布局 使用表格布局也是一種流行的方式。為了在其中垂直居中元素，我們需要對父元素聲明 display:table，然后為子元素聲明 display: table-cell 和 vertical-align: middle。 .parent { display: table; } .child { display: table-cell; vertical-align: middle; } 總結 以上是使用CSS實現垂直居中的三種最常用的方法。它們各有優點和缺點，選擇哪種方法取決于你的具體需求。我希望這篇文章對你有所幫助，如果還有任何問題，請隨時在評論區留言。