CSS垂直居中问题解决方法

在实际运用中，经常需要用到垂直居中的地方主要有一下两种情况：

1、导航栏

导航栏常用到的ul，li标签均为块级元素，a标签为行内元素。要使得a标签的文字垂直居中于li中，只需要a标签的高度与li的高度一致皆可。

然而，a标签是行内元素，不能直接设置其height值，因此，可以选择a的dispaly方式为block，即可为之设置高度line-height。具体代码如下：

				

					首页
				
				

					活动
				
				

					论坛
				
				

					分类
				
		

			.nav{
				width: 200px;
				height: 50px;
				border: 1px solid #007AFF;
				text-align: center;
				padding: 0;
				margin: 0 auto;
			}
			.nav li{
				margin: 0 auto;
				display: inline-block;
				width: 22%;
				height: 50px;
			}
			.nav li a{
				display: inline-block;
				text-decoration: none;
				line-height: 50px;
				border: 1px solid #DDDDDD;				
			}

为了使看起来更直观，我设置了a的边框以及ul的边框，在实际工作中，可以按照不同的要求改变样式。效果图：

2、div内容垂直居中

在多数情况下，第一种方法并不适用，因为第一种方法实际上的子元素的高度填满了上级元素。

要在不改变元素高度的情况下设置垂直居中显示，可以通过给父元素的伪元素添加高度实现。

具体代码如下：

			

				

					首页
				
				

					活动
				
				

					论坛
				
				

					分类
				
			
		
		

			.container {
				width: 80%;
				margin: 0 auto;
				height: 200px;
				border: 1px solid #000000;
				vertical-align: middle;
				text-align: center;/*子元素水平居中*/
			}
			/*伪元素撑开容器，使子元素垂直居中*/
			.container::before{
				height: 100%;
				vertical-align: middle;
				content: " ";
  				display: inline-block;
			}
			.tab {
				width: 80%;
				/*以下两句是垂直居中的重点*/
				display: inline-block;
  				vertical-align: middle;
  				/*以上两句是垂直居中的重点*/
  				
				border: 1px solid #ddd;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background: #fff;
				border-radius: 10px;
				overflow: hidden;
				padding: 0;
			}
			
			.tab li {
				float: left;
				width: 25%;
				position: relative;
				overflow: hidden;
			}
			
			.tab li:before,
			.tab li:after,
			.tab li a {
				-webkit-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
				text-decoration: none;
			}
			
			.tab li:before,
			.tab li:after {
				content: "";
				display: block;
			}
			
			/*竖线*/
			.tab li:not(:first-child):after {
				background: #ddd;
				height: 20px;
				width: 1px;
				left: 0;
				top: 10px;
				position: absolute;
			}
			
			.tab li a {
				display: block;
				position: relative;
				z-index: 2;
				color: #000;
				font-size: 14px;
			}
			
			.tab li:before {
				width: 0;
				height: 0;
				top: 50%;
				left: 50%;
				z-index: 1;
				position: absolute;
			}
			
			.tab li:hover a {
				color: #fff;
			}
			
			.tab li:hover:before {
				box-shadow: 0 0 0 100px #007AFF;
			}
			
			/*竖线消失*/
			.tab li:hover+li:after,
			.tab li:hover:after {
				height: 0;
				top: 20px;
			}
			

效果图：