23 项目放置

使用网格布局居中一个 div 示例 23a

我们已经见识过使用弹性盒布局（flexbox）来居中一个 div 是多么容易。而使用网格布局（grid）的话，所需的实用类更少。

标记

<div class="container">
  <div class="item">...</div>
</div>

解决方案

你既可以像之前那样，在使用网格布局时搭配 justify-items-center 和 items-center 这两个实用类。也可以使用 place-items-* 实用类将这两者结合起来。

<div class="container grid place-items-center">
  <div class="item">2 3</div>
  4
</div>

Working Demo

理解 Place Items 概念

place-items-*工具类可让你同时在列内水平对齐项目，在行内垂直对齐项目。不过，只有在你希望两个方向的对齐方式相同时，这种操作才可行。在前面的示例中，我们希望项目在水平和垂直方向都居中，所以可以使用place-items-*工具类。其可用的工具类与justify-items-*和items-*类似。