css垂直居中那点事

这是我技术博客生涯的第一篇文章，想想还是有点小鸡冻。。。菜鸟的征程现在要开始了

 

学习css的时候经常被各种问题纠结到不要不要的，没办法，只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小伙伴们

 

不知道各位学习css的小伙伴会不会被垂直居中的问题虐的好痛苦，反正我也被虐的挺惨

但是稍微整理一下，感觉好像垂直居中也就那么回事。

 

一，利用line-height

line-height是一个设置行高的一个css样式，一行文字上面的空白+下面的空白=行高

他可以帮助我们解决垂直居中的问题

当一个div中有1行文字（记住：是1行文字）需要垂直居中时，设置line-height=div的height可是使这一行文字垂直居中，但这个办法有点鸡肋，只能用在一行文字上，但是在文本框里面的光标解决上却很有用，现在的主流浏览器chrome，firefox，safari等等等在设置input=“text”时输入文字光标是会自动垂直居中的但是在老古董ie6，ie7，ie8上却会有问题，会变成这样：       很坑有木有？？？没办法这就是ie，这时我们加上line-height=文本框的height可以解决这个问题。

 

 

二，利用table

我们知道vertical-align分别是垂直居中，但是vertical-align只有在table中才能生效，这是我们就可以利用display来解决这个问题

<div>      →  display:table                                                                                                                                                                    

　　<div>     →diaplay:table-cell           /*使这两个div模仿表格和表格单元，给vertical-align提供一个使用的环境*/

　　　　我要垂直居中！！

　　</div>

</div>

这时设置vertical-align:middle就可以生效了，（这个办法可以用于多行文字上）但是这个办法在ie上的支持不是很好

 

 

三，利用负边距

设置position：absolute→top:50%→margin-top:(-div中height的一般)

position：absolute的移动位移的中间点是在块级元素的正中间，但是移动距离的参考是父级元素（50%是父级元素的height的50%，而不是自己的50%），如果有两个div，父级div如果有设置position:absolute或者relative，那么子div就参照父级div来移动，如果父级的div没有设置position:absolute或者relative，那么就参考左上角（0.0）来进行移动。

这个办法可以使整个div垂直居中

 

 

四，利用伸缩盒（flexible-box）

伸缩盒现在有旧和新的两个版本，新版本有取代旧版本的趋势，本文使用的是旧版本的伸缩盒。（新版伸缩盒也可以实现）

利用伸缩盒解决垂直居中的问题也是一种好办法，但是在使用时需要加上-webkit-，-moz-，-ms-，-o-等前缀

我们同样需要利用display放一个box的容器：-webkit-display：box → 若文字是水平排列的使用：box-align:center  / 若文字是纵向排列的使用box-pack：center

 

 

当然，实现垂直居中还可以利用transform来实现等等，还有很多其他的办法，但是以我目前的总结，暂时总结到这4种，本人前端菜鸟，还请各位前端大牛勿喷。

 

 

以上内容均为原创，未经允许不许私自转载