CSS垂直居中问题解决方法

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

1、导航栏

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

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

<ul class="nav"><li><a href="#">首页</a></li><li><a href="#">活动</a></li><li><a href="#">论坛</a></li><li><a href="#">分类</a></li></ul>

.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内容垂直居中

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

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

具体代码如下：

<div class="container"><ul class="tab"><li><a href="#">首页</a></li><li><a href="#">活动</a></li><li><a href="#">论坛</a></li><li><a href="#">分类</a></li></ul></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;}

效果图：