笔记：前端开发中的「居中」整理

前言

标题中说的「居中」在这里其实更加特指指垂直居中。因为一般情况下，前端开发中的水平居中还是挺简单的，比如 text-align: center 或者 margin: 0 auto 两者基本就可以解决大部分水平居中的需求。

但垂直居中可能就会出现在许多不同需求场景中，也因运而生了很多不同的解决方案，网络上其实已经有了很多这方面的文章和讨论，不过还是想自己来梳理一遍。

例子中使用到的 HTML 结构

例子中使用到的 HTML 结构尽可能保持了一致，如下。非常简单，外层一个 div.box 作为容器，居中内部作为目标的 div.content。

基于相对、绝对定位的方案（一）

最基本的居中定位方案采用的方式最基础，也为各前端所熟知：外层容器做相对定位，内部做绝对定位。

但其实这一方案也有两种写法，第一种是比较常规，但要求内部外部都有一个固定的宽和高，通过 left: 50%、top: 50% 配合 margin-left: -width/2、margin-top: -height/2 来得到居中的结果。

或者可以通过 CSS3 中的 calc() 的方法使用 top: calc(50% - height/2) 和 left: (50% - width/2) 来简化样式表的书写。

See the Pen 前端开发中的「居中」: 1. 绝对定位2 by Lien (@movii) on CodePen.

基于相对、绝对定位的方案（二）

第二种相对、绝对定位的方法其实有点 heck 的感觉，通过设置目标元素的 left、right、bottom、top 值为 0 配合 margin: auto （注意不是 margin: 0 auto）来实现。

发现这种方法应该是很早以前一个排列不规则大小图片到规定尺寸的容器内的需求，要求中不能改变 HTML 结构将 <img> 标签在容器内进行居中，应该是在 Stack Overflow 上找到的（这会儿一下子没找到）。

See the Pen 前端开发中的「居中」: 1. 绝对定位 by Lien (@movii) on CodePen.

利用相对、绝对方法的前两个方案，后者对比前者，只是免去了计算宽高的步骤，看上去似乎没有了宽和高的限制，但两者都有个潜在的前提：居中内容的宽和高不能大于容器的宽和高，否则，前者在容器设置了 overflow: hidden 的时候，超过外部容器的区域就不会显示，后者则直接错位。

基于相对、绝对定位的方案（三）

第三种相对、绝对定位的方案是通过在内容中使用 transform: translate(-50%, -50%) 来代替 margin-left、margin-top 来实现元素居中的目的。相比月第一个方案可以免去了针对内容宽和高的计算，相对于第二个方案又不会那么的 heck 感，毕竟 transform: translate 也是正经的元素二维变换样式规则。

See the Pen 前端开发中的「居中」: 2. CSS 的 transform by Lien (@movii) on CodePen.

## 居于视窗单位 vw、wh 的居中 视窗窗口的单位 `vw` 和 `vh` 分别是指 viewport width 和 viewport height。这个方案和之前不同的是，它的使用场景没有上面的多，只在需求是明确要求模态框是基于视窗（viewport）的居中才可以。

See the Pen 前端开发中的「居中」: 4. vw 和 vh by Lien (@movii) on CodePen.

通过 flex 布局实现的居中

基于 CSS3 的 Flexbox 布局如今的浏览器支持已经挺成熟了，特别是移动端上，至少配合足够的 vendor perfix 大部分时候都可以无碍使用。而具体到元素的居中效果实现，Flexbox 可以提供的最简单的方案也短得令人发指：容器和内容都只需要一句样式规则就可以实现，作为容器的 display: flex 和作为内容的 margin: auto。

See the Pen 前端开发中的「居中」: 3. 通过 flex 布局 by Lien (@movii) on CodePen.