CSS 實現容器內文本居中且左側固定鏈接的佈局技巧

需求：一個固定寬度的容器內，文本水平居中顯示，左側固定一個鏈接（不參與居中計算），類似「返回」按鈕 + 標題居中的導航欄效果。

核心代碼

<div style="width: 200px; text-align: center; background: #09F; position: relative;">
  <a style="position: absolute; left: 0;" href="#">鏈接</a>
  文本
</div>

關鍵點解析

• 容器 position: relative：建立絕對定位參考系，使子元素 left: 0 相對容器左邊緣。
• 鏈接 position: absolute; left: 0：脫離文檔流，固定在容器最左側，不佔據空間，不影響文本居中。
• 容器 text-align: center：使行內內容（文本）水平居中。

進階：Flexbox 現代寫法（推薦）

<div style="display: flex; align-items: center; justify-content: center; width: 200px; background: #09F; position: relative;">
  <a href="#" style="position: absolute; left: 10px;">鏈接</a>
  <span>文本</span>
</div>

優點：垂直居中更簡單，擴展性更強（如添加右側圖標）。

適用場景

• 移動端導航欄：左側返回鏈接，中間標題居中。
• 卡片式佈局：標籤固定左側，內容居中。
• 任何需要「側邊固定 + 主體居中」的單行佈局。

掌握 absolute 脫離文檔流不佔空間的特性，配合父級 relative 定位，是實現此類佈局的核心技巧。