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

banq
如何使用 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="container">
  <div class="content">垂直居中内容</div>
</div>
css

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


3、Grid

display: grid; place-items: center;

缺点： Grid针对这样的简单用例有点过度设计

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

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

4、垂直对齐

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

缺点：当元素不是内联时无用。

5、 margin 0 auto 
仍然是水平居中的不错选择！否则 99% 的时间都是Flexbox

最后：

  • 并没有一种最好的方法来实现“将 div 置于中心”。
  • 这取决于将其置于何处（#上下文）以及为何。
  • 人们实际上不需要“将 div 居中” 大多数时候真正的答案是padding。