使用两行代码将项目居中

你还记得以前那种让元素水平和垂直居中显示的方法吗？在 Flexbox 和 CSS Grid 出现之前，这真的很难做到。我通常要么依赖数值（比如给元素定义外边距或内边距——但这其实不是个好主意，因为在不同的屏幕上显示效果不一样），要么使用浮动。以前还可以创建表格，把内容放在里面。为了避免误导正在寻找解决方案的人，我就不在这里提供代码示例了。这些老方法真的过时了。

几年前 Flexbox 出现的时候，简直就像个奇迹。终于可以用三行 CSS 代码让元素居中，这对我来说简直是梦想成真。它很简单：

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

我以前经常用这种方法。直到最近，我才通过Chris 的 Ferdinandi Daily Developer Tips发现了最简单的方法。

做好准备，它来了：

  display: grid;
  place-content: center;

就是这样。是不是很棒？我是在克里斯分享的这个网站上找到的。这是斯蒂芬妮·埃克尔斯做的一个非常酷的项目。她分享了一些简短易懂的CSS代码片段。我强烈推荐大家去看看。