css元素垂直居中
一、碎碎念：啊啊啊，原谅我只能起一个酱紫微大众微俗气的标题，因为实在没有什么能比这样表达的更清楚直观了呢！
二、没有知识储备，直接上示例：
1、思路：给父元素添加display: table属性；给子元素添加display: table-cell,并且需要设置vertical-align: middle;（说明：适用于单行，多行文字）
html:
1 //单行居中 2 <div class="wapper"> 3 <p class="child">听说白雪公主在逃跑 小红帽在担心大灰狼 听说疯帽喜欢爱丽丝 丑小鸭会变成白天鹅</p> 4 </div> 5 //多行居中 6 <div class="wapper"> 7 <div class="child"> 8 <p>听说白雪公主在逃跑 小红帽在担心大灰狼 听说疯帽喜欢爱丽丝 丑小鸭会变成白天鹅</p> 9 <p>听说彼得潘总长不大 杰克他有竖琴和魔法 听说森林里有糖果屋 灰姑娘丢了心爱的玻璃鞋</p> 10 <p>只有睿智的河水知道 白雪是因为贪玩跑出了城堡 小红帽有件抑制自己 变成狼的大红袍</p> 11 </div> 12 </div>
css:
1 <style type="text/css"> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 font-family: 'microsoft yahei'; 8 } 9 .wapper{ 10 width: 100%; 11 height: 500px; 12 background-color: #f7f7f7; 13 display: table; 14 text-align: center; 15 } 16 .wapper .child{ 17 display: table-cell; 18 vertical-align: middle; 19 } 20 </style>
效果图：
2、思路：使用line-height属性，将文字的行高设置成和父元素一样高的时候，单行文字会垂直居中（说明：只适用于单行文字）
html同上
css
1 <style type="text/css"> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 font-family: 'microsoft yahei'; 8 } 9 .wapper{ 10 width: 100%; 11 height: 500px; 12 background-color: #f7f7f7; 13 text-align: center; 14 } 15 .wapper .child{ 16 line-height: 500px; 17 } 18 </style>
3、思路：利用padding或者margin来实现居中，比如父元素高度不固定，我可以给子元素设置margin上下边距相等，或者给父元素设置padding上下相等，即可得到子元素垂直居中的效果；父元素高度固定的时候，比如上边的例子，wapper高度为500px，这时候就需要我们计算一下子元素的高度，设置边距=（父元素高-子元素高）/2，这个得到的值就是子元素的margin-top值，或是父元素的padding-top值。
html同上
css
1 <style type="text/css"> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 font-family: 'microsoft yahei'; 8 } 9 .wapper{ 10 width: 100%; 11 height: 500px; 12 background-color: #f7f7f7; 13 text-align: center; 14 overflow: hidden; 15 } 16 .wapper .child{ 17 line-height: 1; 18 font-size: 14px; 19 margin-top: 243px; //（500-14）/2 = 243 20 } 21 </style>
效果：思路就是这个样子的思路，实际的效果是和我们预期的有偏差的。所以当给子元素设置margin-top的时候，请给父元素加上overflow:hidden，这个也是css中常见的问题，解决办法同样有好几个，本篇暂不做解释。自己也可以用padding试一下哦~
4、思路：利用position: absloute（绝对定位）。其实这个方法和用边距的办法差不多，只不过实现形式不同。首先我们需要知道子元素的高度，然后给这个元素定位在父元素垂直居中的位置上。也是分两种情况：一是父元素高度未知，我们可以用top： 50%，margin-top: -(子元素的高度/2)来实现；二是父元素高度已知，直接top = （父元素高-子元素高）/2，这个方法实际上就是3的另一种实现，原理一致；
html同上
css
1 <style type="text/css"> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 font-family: 'microsoft yahei'; 8 } 9 .wapper{ 10 width: 100%; 11 height: 500px; 12 background-color: #f7f7f7; 13 text-align: center; 14 position: relative; 15 } 16 .wapper .child{ 17 position: absolute; 18 width: 100%; 19 font-size: 14px; 20 line-height: 1; 21 top: 50%; 22 margin-top: -7px; //文字14px 行高1 所以p标签的高度为14px 23 } 24 </style>
效果：父元素高度不固定的时候，一般是父元素中有多个子元素，其他的子元素将父元素撑开，然后某一个子元素设置绝对定位。小例子里没有其他子元素，所以直接设置了父元素的高度，演示一个大概，了解下原理。
5、思路：使用flex布局。注意要做一下兼容！
1 <style type="text/css"> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 font-family: 'microsoft yahei'; 8 } 9 .wapper{ 10 width: 100%; 11 height: 500px; 12 background-color: #f7f7f7; 13 text-align: center; 14 display: -webkit-box; 15 display: -ms-flexbox; 16 display: -webkit-flex; 17 display: flex; 18 -webkit-box-pack: center; 19 -ms-flex-pack: center; 20 -webkit-justify-content: center; 21 justify-content: center; 22 -webkit-box-align: center; 23 -ms-flex-align: center; 24 -webkit-align-items: center; 25 align-items: center; 26 27 } 28 .wapper .child{ 29 30 } 31 </style>
效果：flex虽然使用起来很方便，但是这一堆兼容看起来也是略不爽呢。所以一般垂直居中能用前几种方法解决的，我也很少用flex（个人习惯）。
---------------------------------------------------------2017.02.16----------------------------------------------------------------------------------------------
6、群里的小伙伴给出了另外的一种方法，也是利用了position: absolute;
<div style="width: 50px; height: 50px; background-color: red;position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin:auto"></div>
总结：有错误欢迎指出，互相学习~over！
