css元素垂直居中

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

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

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

html:

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

 

css:

<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    font-family: 'microsoft yahei';
}
.wapper{
    width: 100%; 
    height: 500px;
    background-color: #f7f7f7;
    display: table;
    text-align: center;
}
.wapper .child{
    display: table-cell;
    vertical-align: middle;
}
</style>

 

效果图：

 

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

html同上

css

<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    font-family: 'microsoft yahei';
}
.wapper{
    width: 100%;
    height: 500px;
    background-color: #f7f7f7;
    text-align: center;
}
.wapper .child{
    line-height: 500px;
}
</style>

 

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

html同上

css

<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    font-family: 'microsoft yahei';
}
.wapper{
    width: 100%;
    height: 500px;
    background-color: #f7f7f7;
    text-align: center;
    overflow: hidden;
}
.wapper .child{
    line-height: 1;
    font-size: 14px;
    margin-top: 243px;  //（500-14）/2 = 243
}
</style>

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

 

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

html同上

css

<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    font-family: 'microsoft yahei';
}
.wapper{
    width: 100%;
    height: 500px;
    background-color: #f7f7f7;
    text-align: center;
    position: relative;
}
.wapper .child{
    position: absolute;
    width: 100%;
    font-size: 14px;
    line-height: 1;
    top: 50%;
    margin-top: -7px; //文字14px 行高1 所以p标签的高度为14px
}
</style>

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

 

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

<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    font-family: 'microsoft yahei';
}
.wapper{
    width: 100%;
    height: 500px;
    background-color: #f7f7f7;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

}
.wapper .child{
    
}
</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！