center - css

content center

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

gentle flex

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

autobot

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

存在溢出，位置也不是很完美。

Fluffy Center

.fluffy-center {
  padding: 10ch;
}

有效果，但是基本上不用考虑了。简单地可以尝试一下。

Pop & Plop

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

所有元素容易挤在一起。

总结

到了 2020 年年底，基本上所有的浏览器都已经支持了 flex，可以在 caniuse 中看到：

因此，作为前端开发者，可以放心的使用 flex 布局了，因为其很完美~~~

winner

🎉 虽然代码看起来多一点，但是展示的效果是最佳的，这是未来趋势。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

mvp

.fluffy-center {
  padding: 2ch;
}

上面的代码很容易，也是最容易忽视的中心布局技巧，一般在 button、div 组件布局子类的话，使用上面的代码会很容易达到效果。