網頁元件置中顯示：脫離左對齊的 CSS 佈局技巧

需求

想要讓整個組件置中顯示，而不是預設靠頁面左邊。

常見解決方案

<div style="height:500px;width:500px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center;display:table-cell;vertical-align:middle;">
  中間是你登入的內容區域
</div>

其他現代做法

• Flexbox：父容器設定 display: flex; justify-content: center; align-items: center;，即可水平與垂直置中。
• Margin 自動：區塊元素設定固定寬度與 margin: 0 auto; 可水平置中。
• 絕對定位配合 transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。