只要一行代码，实现五种 CSS 经典布局

qzmjef

页面布局是样式研发的第1步，亦是 CSS 最要紧的功能之一。

常用的页面布局，其实就那样几个。下面我会介绍5个经典布局，只要把握了它们，就能应对绝大都数常规页面。

这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码仅有一行，有很大的学习价值，内容亦很实用。

1、空间居中布局

空间居中布局指的是，不管容器的体积，项目总是占据中心点。

CSS 代码如下

.container { display: grid; place-items: center; }

上面代码必须写在容器上，指定为 Grid 布局。核心代码是place-items属性那一行，它是一个简写形式。

place-items: <align-items> <justify-items>;

align-items属性掌控垂直位置，justify-items属性掌控水平位置。这两个属性的值一致时，就能够合并写成一个值。因此，place-items: center;等同于place-items: center center;。

同理，左上角布局能够写成下面这般。

place-items: start;

右下角布局。

place-items: end;