收藏！40 个 CSS 布局技巧

2015 年 1 月 9 日

阿里妹导读： CSS是 Web开发中不可或缺的一部分，随着Web技术的不断革新， CSS也变得更加强大。 CSS的众多属性你知道了多少？具体开发中该使用什么属性才最适合恰当？如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中，现代CSS特性就可以更好的帮助我们快速实现如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等效果。淘系前端技术专家大漠将详细介绍一些不同的CSS属性来实现这些效果，希望对同学们有所帮助。

文末福利：下载《前端代码是怎样智能生成的》电子书。

一水平垂直居中

如何实现水平垂直居中可以说是CSS面试题中的经典面试题，在多年前这个面试题给很多同学都带来了困惑，但Flexbxo布局模块和CSS Grid布局模块的到来，可以说实现水平垂直居中已是非常的容易。

Flexbox中实现水平垂直居中

在Flexbox布局模块中，不管是单行还是多行，要让它们在容器中水平垂直居中都是件易事，而且方法也有多种。最常见的是在Flex容器上设置对齐方式，在Flex项目上设置 margin:auto 。

先来看在Flex容器上设置对齐方式。

Flex容器和Flex项目上设置对齐方式

你可能已经知道在Flex容器上设置 justify-content 、 align-items 的值为 center 时，可以让元素在Flex容器中达到水平垂直居中的效果。来看一个示例：

<div class=“flex__container”>
<div class=“flex__item”>div>
div>

/* CSS */
.flex__container {
display: flex;
justify-content: center;
align-items: center;
}

效果如下：

这种方式特别适应于让Icon图标在容器中水平垂直居中，不同的是在Icon图标容器上显示设置 display: inline-flex 。比如下面这个示例：

<div class=“flex__container”>
<svg> svg>
div>

/* CSS */
.flex__container {
display: inline-flex;
align-items: center;
justify-content: center;
}

效果如下：

在这种模式之下，如果要让多个元素实现水平垂直居中的效果，那还需要加上 flex-direction: column ，比如：

<div class=“flex__container”>
<div class=“avatar”>🙂div>
<div class=“media__heading”>div>
<div class=“media__content”>div>
<div class=“action”>div>
div>

/* CSS */
.flex__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

效果如下：

在Flexbox布局中，还可以像下面这样让Flex项目在Flex容器中达到水平垂直居中的效果：

<div class=“flex__container”>
<div class=“flex__item”>div>
div>

/* CSS */
.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}

.flex__item {
align-self: center;
}

效果如下：

如果在Flex容器中有多个Flex项目时，该方法同样有效：

.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}

.flex__container > * {
align-self: center;
}

比如下面这个效果：

除此之外，还可以使用 place-content: center 让Flex项目实现水平垂直居中：

.flex__container {
display: flex;
place-content: center;
}

.flex__item {
align-self: center;
}

效果如下：

或者换：

.flex__container {
display: flex;
place-content: center;
place-items: center;
}

效果如下：

这两种方式同样适用于Flex容器中有多个Flex项目的情景：

.flex__container {
display: flex;
flex-direction: column;
place-content: center;
}

.flex__container > * {
align-self: center;
}

// 或

.flex__container {
display: flex;
flex-direction: column;
place-content: center;
place-items: center;
}

效果如下：

可能很多同学对于 place-content 和 place-items 会感到陌生。其实 place-content 是 align-content 和 justify-content 的简写属性；而 place-items 是 align-items 和 justify-items 的简写属性。即：

.flex__container {
place-content: center;
place-items: center;
}

等效于：

.flex__container {
align-content: center;
justify-content: center;

align-items: center;
justify-items: center;
}

虽然扩展出来有四个属性，但最终等效于：

.flex__container {
display: flex;
align-items: center;
justify-content: center;
}

// 多行
.flex__container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

在Flex项目上设置margin: auto

如果在Flex容器中只有一个Flex项目，还可以显式在Flex项目中显式设置 margin 的值为 auto ，这样也可以让Flex项目在Flex容器中水平垂直居中。例如：

.flex__container {
display: flex; // 或 inline-flex
}

.flex__item {
margin: auto;
}

效果如下：

整个过程，你可以通过下面这个示例来体验。尝试着选中不同方向的 margin 值：

Grid中实现水平垂直居中

CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。

在CSS Grid布局中，只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例：

<div class=“grid__container”>
<div class=“grid__item”>div>
div>

/* CSS */
.grid {
display: grid; // 或 inline-grid
place-items: center
}

效果如下：

在CSS Grid布局模块中，只要显式设置了 display: grid （或 inline-grid ）就会创建Grid容器和Grid项目，也会自动生成网格线，即行和列（默认为一行一列）。

在没有显式地在Grid容器上设置 grid-template-columns 和 grid-template-rows ，浏览器会将Grid容器默认设置为Grid内容大小：

这种方法也适用于CSS Grid容器中有多个子元素（Grid项目），比如：

这个时候你看到的效果如下:

而且 palce-items 适用于每个单元格。这意味着它将居中单元格的内容。比如下面这个示例：

<div class=“grid__container”>
<div class=“grid__item”>
<h3>Special title treatmenth3>
<p>With supporting text below as a natural lead-in to additional content.p>
<div class=“action”>Go somewherediv>
div>
div>

/* CSS */
.grid__container {
display: grid;
place-items: center;
grid-template-columns: repeat(2, 1fr);
gap: 2vh;
}

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

效果如下：

二等高布局

等高布局也是Web中非常常见的一种布局方式，而且实现等高布局的方案也有很多种。这里我们主要来看Flexbox布局模块和Grid布局模块给我们带来了什么样的变化。

在Flexbox和Grid布局模块中，让我们实现等高布局已经是非常的简单了，比如：

<flex__container>
<flex__item>flex__item>
<flex__item>flex__item>
<flex__item>flex__item>
flex__container>

/* CSS */
.flex__container {
display: flex; // 或 inline-flex
}

简单地说，在容器上显式设置了 display 的值为 flex 或 inline-flex ，该容器的所有子元素的高度都相等，因为容器的 align-items 的默认值为 stretch 。

这个时候你看到的效果如下：

这种方式特别适用于卡片组件中：

在Grid布局模块中类似：

<grid__container>
<grid__item>grid__item>
<grid__item>grid__item>
<grid__item>grid__item>
grid__container>

/* CSS */
.grid__container {
display: grid;
grid-template-columns: 20vw 1fr 20vw; /* 根据需求调整值*/
}

效果如下：

同样在一些卡片类布局中运用：

如果需求有所调整，比如在Flex项目或 Grid项目的子元素高度和容器高度相同。

<flex__container>
<flex__item>
<content>content>
flex__item>
flex__container>

/* CSS */
.flex__container {
display: flex;
}

.content {
height: 100%
}

// 或
.grid__container {
display: grid;
grid-auto-flow: column;
}

.content {
height: 100%;
}