水平垂直居中的方法有多種，以下是一些常見的方法：
絕對定位與負邊距實現：
將元素的 `top` 和 `left` 屬性都設為 `50%`。
使用 `margin` 邊距，將元素回拉它本身高寬的一半，實現垂直居中。
絕對定位與 margin：
設定元素的 `position` 為 `absolute`，並使 `left`, `top`, `bottom`, `right` 屬性都為 `0`。
使用 `margin: auto` 可以讓塊級元素水平居中。
在有絕對定位的情況下，`margin-top` 和 `margin-bottom` 的值不是 `0`，而是通過計算所得，因此能實現垂直居中。
CSS3 transform：
使用 `transform: translate(-50%, -50%)` 可以輕鬆地在未知元素的高寬的情況下實現元素的垂直居中。
flex 布局：
設定父元素的 `display` 為 `flex`，並使用 `justify-content: center` 和 `align-items: center` 可以實現水平垂直居中。
table-cell 布局：
設定父元素的 `display` 為 `table-cell`，並使用 `text-align: center` 進行水平居中，`vertical-align: middle` 進行垂直居中。
grid 布局：
使用 CSS Grid 的 `justify-items: center` 和 `align-items: center` 可以實現水平垂直居中。
以上方法可以根據實際需求和瀏覽器兼容性選擇使用。