CSS 讓子 Div 在父 Div 中垂直居中：Absolute + Transform 現代最佳實踐

父容器 `.out`、子容器 `.in`，需垂直水平居中。

方案一：Absolute + Transform (推薦、通用、不需知子尺寸)

.out { position: relative; width: 300px; height: 300px; background: blue; }
.in  { position: absolute; left: 50%; top: 50%; 
       transform: translate(-50%, -50%); 
       width: 200px; height: 200px; background: red; }

• 子元素左上角對齊父中心，再用 `translate(-50%,-50%)` 向回拉半個自身寬高，**完美居中**，無需知道具體尺寸。
• 支援動態尺寸、響應式、內容自適應高度。

方案二：Flexbox (現代佈局首選)

.out { display: flex; justify-content: center; align-items: center; 
       width: 300px; height: 300px; background: blue; }
.in  { width: 200px; height: 200px; background: red; }

• 父容器一行 `display:flex` 即可，子元素無需定位，代碼最少、語義最清晰。
• IE10+ 支持，現代項目**首選 Flexbox**。

方案三：Grid (最簡潔)

.out { display: grid; place-items: center; }

避坑：Margin 負值法 (需知子尺寸)

.in { position: absolute; left: 50%; top: 50%; 
      margin-left: -100px; margin-top: -100px; } /* 寬高一半 */

• 子尺寸變更需同步修改 margin，維護性差，不推薦新項目使用。

總結：**Flexbox (`align-items:center`) 為現代首選**，Absolute+Transform 兼容舊瀏覽器/特殊場景，Grid 極簡但兼容性稍弱。