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;
}

效果图：