一、碎碎念：啊啊啊，原谅我只能起一个酱紫微大众微俗气的标题，因为实在没有什么能比这样表达的更清楚直观了呢！

二、没有知识储备，直接上示例：

1、思路：给父元素添加display: table属性；给子元素添加display: table-cell,并且需要设置vertical-align: middle;（说明：适用于单行，多行文字）

html:

1 //单行居中 2 
     
       3     
      
听说白雪公主在逃跑 小红帽在担心大灰狼 听说疯帽喜欢爱丽丝 丑小鸭会变成白天鹅
 4 
     
 5 //多行居中 6 
     
       7     
      
        8     　　
       
听说白雪公主在逃跑 小红帽在担心大灰狼 听说疯帽喜欢爱丽丝 丑小鸭会变成白天鹅
 9     　　
       
听说彼得潘总长不大 杰克他有竖琴和魔法 听说森林里有糖果屋 灰姑娘丢了心爱的玻璃鞋
10     　　
       
只有睿智的河水知道 白雪是因为贪玩跑出了城堡 小红帽有件抑制自己 变成狼的大红袍
11     
      
12 
     

 

css:

1 

 

效果图：

 

2、思路：使用line-height属性，将文字的行高设置成和父元素一样高的时候，单行文字会垂直居中（说明：只适用于单行文字）

html同上

css

1 

 

3、思路：利用padding或者margin来实现居中，比如父元素高度不固定，我可以给子元素设置margin上下边距相等，或者给父元素设置padding上下相等，即可得到子元素垂直居中的效果；父元素高度固定的时候，比如上边的例子，wapper高度为500px，这时候就需要我们计算一下子元素的高度，设置边距=（父元素高-子元素高）/2，这个得到的值就是子元素的margin-top值，或是父元素的padding-top值。

html同上

css

1 

效果：思路就是这个样子的思路，实际的效果是和我们预期的有偏差的。所以当给子元素设置margin-top的时候，请给父元素加上overflow:hidden，这个也是css中常见的问题，解决办法同样有好几个，本篇暂不做解释。自己也可以用padding试一下哦~

 

4、思路：利用position: absloute（绝对定位）。其实这个方法和用边距的办法差不多，只不过实现形式不同。首先我们需要知道子元素的高度，然后给这个元素定位在父元素垂直居中的位置上。也是分两种情况：一是父元素高度未知，我们可以用top： 50%，margin-top: -(子元素的高度/2)来实现；二是父元素高度已知，直接top = （父元素高-子元素高）/2，这个方法实际上就是3的另一种实现，原理一致；

html同上

css

1 

效果：父元素高度不固定的时候，一般是父元素中有多个子元素，其他的子元素将父元素撑开，然后某一个子元素设置绝对定位。小例子里没有其他子元素，所以直接设置了父元素的高度，演示一个大概，了解下原理。

 

5、思路：使用flex布局。注意要做一下兼容！

1 

效果：flex虽然使用起来很方便，但是这一堆兼容看起来也是略不爽呢。所以一般垂直居中能用前几种方法解决的，我也很少用flex（个人习惯）。

---------------------------------------------------------2017.02.16----------------------------------------------------------------------------------------------

6、群里的小伙伴给出了另外的一种方法，也是利用了position: absolute;

 

 

总结：有错误欢迎指出，互相学习~over！