css元素垂直居中

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

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

一、思路：给父元素添加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>

 

效果图：

 

二、思路：使用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>

 

三、思路：利用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试一下哦~

 

四、思路：利用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>

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

 

五、思路：使用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----------------------------------------------------------------------------------------------

六、群里的小伙伴给出了另外的一种方法，也是利用了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！