元素水平垂直居中的方法有多 種，以下是一些常 見的方法：
使用Flex 布局：
將父元素 設定 為 `display: flex;`， 並使用 `justify-content: center;` 和 `align-items: center;` 來 實 現水平和垂直居中。
使用Transform 變形：
父元素高度 設定 為 `height: 100vh;`，子元素使用 `transform: translate(-50%, -50%);` 來 實 現水平和垂直居中。
使用定位和margin:auto：
父 級元素 設定 為相 對定位，子 級元素 設定 為 絕 對定位， 並且 四個定位 屬性（top、left、bottom、right）的值都 設定 為0，然 後 給子 級元素 設定 `margin: auto;` 來 實 現水平和垂直居中。
使用定位和margin: 負值：
父 級元素 設定 為相 對定位，子 級元素移 動自身50% 實 現水平和垂直居中，不要求父元素的高度。
使用Table 布局：
將父元素 設定 為 `display: table-cell;` 和 `vertical-align: middle;`，子元素使用 `text-align: center;` 來 實 現水平和垂直居中。
使用Grid 布局：
父元素 設定 為 `display: grid;`，然 後使用 `justify-self: center;` 和 `align-self: center;` 來 實 現水平和垂直居中。
行 內元素水平垂直居中：
父元素 設定 `text-align: center;` 和 `line-height` 等於父元素的 `height`，子元素 設定 為 `display: inline-block;` 來 實 現水平和垂直居中。
以上方法可以根 據具 體的 頁面 布局和元素需求 選 擇使用。