鄙人从业五年有余，切图无数，见过一篇又一篇写“居中”的文章，已经熟视无睹。
当已经习惯了CSS3的舒爽，有一天突然接到PC网站的需求，施展不开手脚的时候，发现自己脑海中并不能马上想出一个很好用的垂直居中方案。
这里说的方案，当然不包括定位和margin负值之类，也不包括flex、grid、transform等，前者不够灵活，破坏正常文档流，后者略高级。
那么该如何居中？margin或者padding？给多少合适？加了最外面的，里面还是贴着边的，还要继续撑空间。
虽说这种地方不会经常动，即使代码写起来略繁琐，不是那么优雅，写完再也不会改，但如果我们有更好更强大的实现方案，为何不用呢？
于是不得不找寻其他可能，结果是令人惊喜的。
结构代码统一如下：
<div class="box">
<span>垂直居中</span>
</div>
方案一：table-cell
日常需求中，我们乐于用line-height去做元素内文案的垂直居中，比较常见的是按钮，但时间长了就会有所顾忌，因为很多地方你不知道它什么时候就从单行文字变成了两行，其后果可能是灾难性的，所以即使不愿意用table来书写结构，也是可以使用如下代码来实现：
.box {
display: table;
}
.box span {
display: table-cell;
vertical-align: middle;
}
这样不论是几行文字，都能垂直居中，而不需要去管间距问题。
方案二：vertical-align
.box:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
只要这么简单的一行代码，是不是很厉害？
原理就是行内元素的垂直居中，只是这里那个“元素”并不真实存在，而是用伪元素模拟出来，这是第一点，第二点就是 heigh:100%，这样就能让内容相对整个容器垂直居中，不发生上下偏移。
但这种方法有个需要注意的点，单行的时候正常，变多行的时候就无法居中了，不过也不用慌，给span同时加上vertical-align: middle; 即可重新居中。
方案三：writing-mode
.box {
writing-mode: tb-lr;
writing-mode: vertical-lr;
text-align: center;
}
.box span {
display: inline-block;
writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
这种方案一般情况下也不会使用到，不是它不够好，而是它同样改变正常文档流，将网页的行内元素从左右排列方式改成了上下，然后再把行内元素居中的方法应用其上，即可实现垂直居中，问题是需要在居中的元素里面再把方向改回来，否则文字也会从上到下排列。
需要注意的一点，这里多写了两行 writing-mode:tb-lr;和 writing-mode:lr-tb;是因为下面的两个更高级的写法不支持IE8，我们找这种方法就是要兼容低版本的，所以要加上。
方案四：absolute; margin: auto;
.box {
position: relative;
}
.box span {
position: absolute;
height:100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
这种方法有两个小缺陷:
一、会使用绝对定位破坏文档流
二、需要给居中元素定高（通过计算分配空间）
但这种方式是具备启发性的，它会让子元素跟父元素保持所设置的距离，就是这里的left、top等值（可以不为0，同一纬度的值相等即可），如果不够，就用空隙去填充，使用 margin:auto; 让填充空间在元素的上下和左右进行均分，以达到居中的效果。
这个作为最后一点列出来，在某些适用场景下可以选用，但不作为优先考虑。
以上方案主要讨论的是垂直方向的居中，水平方向代码并未贴出，大家可以根据需要自行设置宽度。
总结
这篇文提到的知识点都稍显老旧，但需要派上用场时候还是很实用的，大家在积极学习和探索新知识的同时，不宜把旧知识丢掉呀~
如果正在读这篇文章的、机智的你还有其他好方法，欢迎不吝赐教！~
