CSS 代码如何在一个div内让文字垂直居中

html>


	
	

	
		div {
			font-family: "microsoft yahei";
			border: 5px solid #cce800;
		}
		.container {
			width: 600px;
			padding: 10px;
			margin: 10px auto;
			background-color: gray;
		}
		.vertical {
			display: table-cell;
			height: 400px;
			padding: 5px;
			text-indent: 2em;
			vertical-align: middle;
			background-color: #cce8cf;
			border-radius: 5px;
		}
	


	
	
		
			测试垂直居中,即便是多行，我也还是垂直居中对齐的。
			
问题分析：

			
1.CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。

			
2.Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。

			
3.扩张一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。

		
	

下边是运行出来的效果：

问题分析：

1. CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。

2. Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。

3. 扩展一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。

   
   

另外哥推荐你用sublime写前端代码，灰常不错的一款编辑器，骚年，哥能帮你的就这么多了，剩下自己努力吧。