关于一些垂直居中问题的解决方法

垂直居中问题

一般的做法是用 position 定位和 margin 负值来实现的。这里介绍几种不同的方法。

多行文字垂直居中

• 文字外部容器高度不固定 : 给多行文字上下设置 padding 值即可。
  以下是实现代码和效果图。

.container{
            width: 200px;
            background-color: #f2dede;
            margin-top: 50px;
}
.inner-container{
            padding: 10px 0;
}
.inner-container p{
            text-align: center;
            margin: 0;
}
<!-------------内容高度不固定的垂直居中--------->
<div class="container">
   <div class="inner-container">
       <p>这里是文字</p>
       <p>这里是文字</p>
       <p>这里是文字</p>
       <p>这里是文字</p>
       <p>这里是文字</p>
       <p>这里是文字</p>
       <p>这里是文字</p>

   </div>
</div>

多行文本垂直居中（高度不固定）

• 文字外部容器高度固定 : 首先给外容器用 height 给出一个定值，然后将其 display 属性设置为 table-cell,接下来设置内容，将内容的 vertical-align 属性设置为 middle。需要注意的是使用这种方法，外容器不能设置为浮动状态。
  以下是实现代码和效果图。

.container{
            width: 200px;
            background-color: #f2dede;
            margin-top: 50px;
}
.table-container{
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
}
<!-------------内容高度固定的垂直居中(文字)--------->
<div class="container">
    <div class="table-container">
        <span>这里是文字</span>
        <span>这里是文字</span>
        <span>这里是文字</span>
        <span>这里是文字</span>
        <span>这里是文字</span>

    </div>
</div>

多行文本垂直居中（高度固定）

内容垂直居中

• 嵌套标签的垂直居中 : 嵌套标签的垂直居中实际上和上述的高度固定的居种方法是一样的。
  以下是代码和效果图。

.container{
            width: 200px;
            background-color: #f2dede;
            margin-top: 50px;
}
.table-container{
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
}
ul{
            display: inline-block;
            padding: 0;
            background-color: #2aabd2;
            vertical-align: middle;
            list-style: none;
}
ul li{
            float: left;
            height: 20px;
}
<!-------------内容高度固定的垂直居中(嵌套标签)--------->
<div class="container">
    <div class="table-container">
        <ul>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
        </ul>
    </div>
</div>

内容垂直居中（嵌套标签）

• 图片垂直居中 : 同上。
  以下是代码和效果图。

.container-img{
            width: 330px;
            background-color: #f2dede;
            margin-top: 50px;
}
.table-container-img{
            width: 330px;
            height: 250px;
            display: table-cell;
            vertical-align: middle;
}
<!-------------内容高度固定的垂直居中(图片)--------->
<div class="container-img">
    <div class="table-container-img">
        ![](bg.jpg)
    </div>
</div>

内容垂直居中（图片）