css垂直居中 CSS“非常规”垂直居中

我经商五年多，画过无数的画。我看过一篇又一篇写着“中心”的文章，却视而不见。

当我习惯了CSS3的酷炫之后，突然有一天收到了PC网站的需求，我发现我并不能马上想出一个非常有用的垂直居中方案。

这里提到的方案不包括定位、负边距、伸缩、网格、变换等。前者不够灵活，破坏了正常的文档流，而后者略超前。

那么如何居中呢？边距还是填充？多少合适？最外面的加进去，里面的还贴着边，会继续停留在空之间。

虽然这种地方不经常动，即使代码有点繁琐，没有那么优雅，写出来之后也不会变，但是如果我们有更好更强大的实现方案，为什么不用呢？

所以我不得不寻找其他的可能性，结果令人惊讶。

结构代码统一如下:

& ltdiv class="box " >

& ltspan>。垂直居中

& lt/div>。

方案1:表格单元

在我们的日常需求中，我们愿意使用行高来做元素中副本的垂直居中。按钮比较常见，但是时间长了我们会有所顾忌，因为很多地方你不知道什么时候会从单线变成双线，后果可能是灾难性的。因此，即使不想用table来写结构，也可以用下面的代码来实现:

。box {

显示:表格；

}

。box span {

显示:表格单元格；

垂直对齐:中间；

}

这样无论多少行文字都可以垂直居中，不用处理间距问题。

方案2:垂直对齐。框:在{

内容:“”；

显示:内嵌块；

垂直对齐:中间；

身高:100%；

}

只要这么简单的一行代码，是不是很神奇？

原理是线内元素垂直居中，但这里的“元素”并不是真的存在，而是用伪元素模拟的。这是第一点，第二点是高度:100%，这样内容就可以相对于整个容器垂直居中，而不会上下移动。

不过，这个方法有一点要注意。单线的时候很正常，多线的时候不能居中，但是不用慌。加竖排:中间同时跨；你可以重新定位。

方案3: writing-mode.box

书写模式:TB-lr；

书写模式:垂直-lr；

文本对齐:居中；

}

。box span {

显示:内嵌块；

书写模式:lr-TB；

书写模式:水平-TB；

}

这种方案在正常情况下是不会用的，不是说不够好，而是也改变了正常的文档流，把网页中元素的排列从左右变为上下，然后应用网页中元素居中的方法实现垂直居中。问题是方向需要在居中的元素中改回来，否则单词会从上到下排列。

需要注意的是，这里多写了两行:TB-LR；以及书写方式:lr-TB；就是因为下面两个更高级的编写方法不支持IE8，我们在找这个方法兼容更低版本，所以要补充。

选项4:绝对；边距:自动；。box {

位置:相对；

}

。box span {

位置:绝对；

高度:100px

top:0；

底部:0；

左:0；

右:0；

边距:自动；

}

这种方法有两个小缺陷:

首先，绝对定位会被用来破坏文档流

第二，需要设置中心元素的高度(通过计算分配空

但是这个方法是有启发性的，会保持子元素和父元素之间的设定距离，也就是这里的左和上的值(可以不同于0，但是同纬度的值相等)。不够的话，用空间隙填充，用margin:auto；让fill 空在元素上、下、左、右等分，达到居中的效果。

这被列为最后一点，可以在一些适用的场景中选择，但不是优先选择。

以上方案主要讨论垂直方向居中，水平方向代码还没有贴出来，可以根据需要设置宽度。

总结

文中提到的知识点有点老，但是需要用到的时候还是很实用的。在积极学习和探索新知识的同时，不适宜丢弃旧知识~

如果您正在阅读这篇文章，并且有其他好的方法，请随时给我们您的建议！~