div垂直居中的几种方法

来源：互联网发布：免费网络推手联系方式编辑：程序博客网时间：2024/04/28 19:56

1. 文字居中方式

只需要设置line-height的值和height的值一样就ok了。确定就是只能单行显示，换行的话就会失去效果。

div {           height:30px;           line-height:30px;           overflow:hidden;    }

2. 多行未知高度文字的垂直居中
html结构：

<!--方式一-->  <div class="parent"><div class="child"></div>  </div> <div class="gap"> </div> <!--方式二--> <div class="parent"><div class="child2"></div>  </div>  <!--方式三--> <div class="parent2"><div class="child3"></div>  </div>

样式（方式1）

.parent {position:relative;background-color:#333;width:300px;height:200px;overflow:hidden;_zoom:1;margin: 0 auto;}.child {position:absolute;width:100px;height:80px;top:50%;left:50%;margin-top:-40px;margin-left:-50px;background-color:#ccc;}

样式（方式2）

.parent {position:relative;background-color:#333;width:300px;height:200px;overflow:hidden;_zoom:1;margin: 0 auto;}.child {position:absolute; left:0;right:0;top:0;bottom:0;background-color:#ccc;margin:20px;}

样式（方式3）

.parent2 {height:400px;   display:table; margin:0 auto;overflow:hidden;padding:20px;background-color:#ccc;}.child3 {vertical-align:middle;   display:table-cell;   border:1px solid #FF0099;   background-color:#FFCCFF;   width:760px;  }

其中，方式2那个是比较少见的，腾讯前端特工队，抢滩登陆游戏中出现过。
如有不对的地方，欢迎大家指正，共同学习！！！

0 0