CSS实现水平垂直居中

作为一名前端工程师，元素居中是日常开发中处理的最常见问题之一。实现 CSS 居中的方式有很多种，各有利弊，这里我总结一下我遇到过或者用过的方案。

水平居中

1. 内联元素水平居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。这种方法对内联元素inline、内联块 inline-block、内联表 inline-table、inline-flex 元素水平居中均有效(即行内或类行内元素)

text-align: center

2. 块级元素水平居中

• margin: 0 auto;

1 2 3

//对于一个有固定宽度的块级元素，设置它的`margin-left`、`margin-right`均为autoj即可让元素水平居中 margin: 0 auto

• position + margin

1 2 3 4 5 6 7

.son { position: absolute; left: 0; right: 0; width: 固定值; margin: 0 auto; }

• position + transform

1 2 3 4 5 6

.son { position: absolute; left: 50%; width: 固定值; transform: translateX(-50%); }

• flex布局

1 2 3 4 5 6

.parent { display: flex; justify-content: center; }

至此，以上写法都是不需要预先了解父元素的宽度即可设置居中，下面的这种写法就需要提交了解父元素的高度

• position + 负外边距

1 2 3 4 5 6

.son { position: absolute; left: 50%; width: 固定值; margin-left: -0.5*宽度; }

3. 多个块级元素水平居中

如果需要居中两个或两个以上的块级元素，可能flex布局可以为你提供极大的便利，如下：

---

垂直居中

块级元素垂直居中与水平居中的处理方式大同小异，但还是相对于后者稍微棘手一点，下面的这些方式只是在水平居中的基础上做一些修改（主要针对特殊的属性差异）和补充，剩下的可以参考水平居中的写法类推。

1. "inline-*"元素垂直居中

1.1 单行文本元素居中
有时像文本或链接等行内元素居中显示，只是因为它们的上下有相等的填充

当然，在有些情况下无法通过这种填充的方式来进行居中，这时只需要设置`line-height`等于`height`即可

1.2 多行文本元素居中
顶部和底部的填充同样可以为多行文本提供居中效果，但有的时候像table-cell这种看起来的确可以通过这样的方式去实现，结果却不能将想象的效果呈现出来。这种情况下，vertical-align属性便能够发挥出它的作用：

• 方案一：

• 方案二：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.parent { position: relative; } .parent::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .parent p { display: inline-block; vertical-align: middle; }

2. 块级元素居中

2.1 flex布局

1 2 3 4 5 6 7

.parent { display: flex; jusitify-content: center; flex-direction: column; height: 固定值; } // 这种方式同样可以作用于多行文本元素居中

2.2 其它方式参考水平居中的实现

---

视窗单位的解决方案

CSS Values and Units Level 3定义了一种新的单位，称为相对视窗(viewport-relative)长度单位。

• vw是相对于视窗的宽度。与你预期刚好相反,1vw相当于视窗宽度的1%，而不是100%
• 与vw相似的是，1vh相当于视窗高度的1%
• 如果视窗的宽度小于高度，1vmin等于1vw，反之，如果视窗宽度大于高度，1vmin等于1vh
• 如果视窗的宽度大于高度，1vmax等于1vw，反之，如果视窗宽度小于高度，1vmax等于1vh
  如下示例：

1 2 3 4 5 6 7

div { width: 500px; height: 500px; padding: 50px; margin: 50vh auto 0; transform: translateY(-50%); }

目前，这种视窗单位大多数浏览器都已经支持，缺点就是只能相对于视窗居中，看起来与粘性定位有些共同之处。

这篇分享就到这结束了，如果发现了其中有错误欢迎前来指正或者您有好的想法也希望能一起探讨