div垂直居中的几种方法

最新推荐文章于 2022-03-02 14:40:18 发布

原创最新推荐文章于 2022-03-02 14:40:18 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

6 篇文章

订阅专栏

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