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:;

     padding:;

 }

 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:;

     padding:;

 }

 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:;

     padding:;

 }

 body{

     font-family: 'microsoft yahei';

 }

 .wapper{

     width: 100%;

     height: 500px;

     background-color: #f7f7f7;

     text-align: center;

     overflow: hidden;

 }

 .wapper .child{

     line-height:;

     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:;

     padding:;

 }

 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:;

     top: 50%;

     margin-top: -7px; //文字14px 行高1 所以p标签的高度为14px

 }

 </style>

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

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

 <style type="text/css">

 *{

     margin:;

     padding:;

 }

 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！

巴特西

css元素垂直居中

最新文章

热门文章