CSS 佈局核心：塊級、行內、行內塊元素特性與水平垂直居中完全指南

一、元素分類與盒模型基礎

1. 塊級元素

• 獨佔一行，前後換行。
• 可設 width、height、line-height、margin、padding。
• 預設寬度 = 父容器 100%。
• 常見：div、p、h1-h6、ul/ol/dl、table、form 等。

2. 行內元素

• 同行顯示，不換行。
• 不可設寬高、上下 margin/padding、line-height 無效。
• 寬度由內容撐開。
• 常見：span、a、strong、em、label、input（舊分類）等。

3. 行內塊元素

• 同行顯示，可設寬高、margin、padding、line-height。
• 常見：img、input（現代分類）、button 等。
• 可通過 display: inline-block 將任意元素轉為行內塊。

4. display 屬性轉換

/* 塊級轉行內 */
.block-to-inline { display: inline; }

/* 行內轉塊級 */
.inline-to-block { display: block; }

/* 任意轉行內塊 */
.any-to-inline-block { display: inline-block; }

/* 隱藏元素（不佔空間） */
.hidden { display: none; }

二、無名塊框與無名行框

當文本直接放在塊級容器中而無標籤包裹時，瀏覽器會生成無名塊框；塊級元素內的每行文本形成無名行框。這些框無法直接選中樣式，但理解它們有助於掌握佈局渲染本質。

三、水平居中方案大全

1. 行內/行內塊元素：父級 text-align: center

.father { text-align: center; }
.child { display: inline-block; /* 或 inline */ }

2. 塊級元素（定寬）：margin: 0 auto

.block-center { width: 800px; margin: 0 auto; }

3. 塊級元素（不定寬）方案對比

四、垂直居中方案大全

1. 單行文本/行內元素：line-height = height

.v-center { height: 100px; line-height: 100px; }

2. 已知高度元素：上下 padding 相等

.known-height { padding: 50px 0; /* 高度 100px */ }

3. vertical-align: middle（僅限表格單元格）

.table-cell { display: table-cell; vertical-align: middle; height: 200px; }

4. 絕對定位 + Transform（不定寬高萬金油）

.parent { position: relative; }
.child {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

5. Flexbox（現代首選）

.flex-center {
    display: flex;
    justify-content: center; /* 水平 */
    align-items: center;     /* 垂直 */
}

五、完整代碼示例

文中提供了完整的 HTML/CSS/JS 示例，展示各種居中效果與 transition 動畫過渡，可直接複製運行驗證。

總結

掌握元素分類與 display 轉換是 CSS 佈局的基石。現代項目首選 Flexbox/Grid，兼容舊瀏覽器時靈活選用 Table、絕對定位或 inline-block 方案。理解無名框機制，能讓你在疑難雜症中游刃有餘。