div居中：最佳做法是什麼？

banq發表於2024-06-19

如何使用 CSS 垂直對齊內容？將 div 置於 DOM 元素中間的最佳做法是什麼，其優缺點是什麼？

1、使用 position 屬性

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

缺點：transform 無法改變元素的佈局，尤其是當元素在 left: 50% 和 top：50%以下.

2、Flexbox

display: flex; justify-content: center; align-items: center;

缺點：找不到任何缺點。

<div class=<font>"container">
  <div class="content">垂直居中內容</div>
</div>
css

.container {
  display: flex;
  align-items: center; /* 垂直居中 */<i>
  justify-content: center; /* 水平居中 */<i>
  height: 100vh; /* 容器高度 */<i>
}


3、Grid

display: grid; place-items: center;

缺點： Grid針對這樣的簡單用例有點過度設計

<div class=<font>"container">
  <div class="content">垂直居中內容</div>
</div>
css

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */<i>
  height: 100vh; /* 容器高度 */<i>
}

4、垂直對齊

display: inline-block; vertical-align: middle;

缺點：當元素不是內聯時無用。

5、 margin 0 auto 
仍然是水平居中的不錯選擇！否則 99% 的時間都是Flexbox

最後：

  • 並沒有一種最好的方法來實現“將 div 置於中心”。
  • 這取決於將其置於何處（上下文）以及為何。
  • 人們實際上不需要“將 div 居中” 大多數時候真正的答案是padding。

相關文章