多行文字垂直居中

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即便是某些浏览器不支持我只需作少量的CSSHack技术就能够啊！CSS中的确是有vertical-align属性，可是它只对 HTML 元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有 valign 特性的，所以使用vertical-align对它们不起做用。

1、单行文本居中

对于单行文本，对它实现居中相对比较简单，咱们只须要设置它的行高 line-height 与 实际高度 height 相等便可。

2、多行文本

第一种：display:table的方法

.box{
    display: table;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.con{
    display: table-cell;
    vertical-align: middle;
}



<div class="box">
    <p class="con">刚开始的个 <br> adskgks;d g</p>
</div>

这样，容器内部的文字能够垂直居中。

第二种：position: absolute 的方法

　　若是文字容器的高度是固定的，能够经过 CSS 实现。

.box{
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.con{
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}


<div class="box">
    <p class="con">刚开始的个 <br> adskgks;d g</p>
</div>

固然，文字容器的高度不是固定的，就须要 js 计算实现了。

第二种：line-height: height 的方法

.box{
    margin: 50px auto;
    width: 500px;
     height: 200px;
    border: 1px solid #000;
    line-height: 200px;
}

.box span{
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}



<div class="box">
    <span>第一个span <br>多行test <br>多行test</span>
</div>

父级容器的 line-height: height； 文字容器也加一个line-height，能够实现多行文字居中。

以上，都是针对单个容器内多行文字的实现的方法。若是是元素内部有多个盒子须要垂直居中且内部文字也要垂直居中的话，要怎么设置呢？尤为是多个容器仍是相关联的的。

 

示例以下：

<div class="box">
       <span>第一个span <br>test多行</span>
       <span>第二个span</span>
       <span>第三个span</span>
</div>　　

首先，咱们尝试使用 display: table，看下行不行。

 .box{
    display: table;
    width: 500px;
    height: 200px;
    border: 1px solid #000;
}

.box span{
    display: table-cell;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #ccc;
}

结果如图：

文字是垂直居中了，可是这里有个问题，我设置的 width 和 margin 没有起到做用，页面呈现的不是我须要的样式，那要怎么作呢？

PS：设置了display:table-cell的元素对宽度高度敏感，对 margin 值无反应，响应 padding 属性，基本上就是一个 td 标签元素了。

 二、使用 line-height : height

这里只需在套层结构就能够了。即:

.box{
    margin: 50px auto;
    width: 500px;
    height: 200px;
　　 font-size: 0;
    border: 1px solid #000;
    line-height: 200px;
}

.box span{
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin-right: 20px;
　　font-size: 22px;
    vertical-align: middle;
    text-align: center;
    border:  1px solid #ccc;
}

 .box i{
    display: inline-block;
    vertical-align: middle;
    line-height:1.3;
}


<div class="box">
    <span><i>第一个span <br>多行test <br>多行test</i></span>
    <span><i>第二个span <br>多行test <br>多行test</i></span>
</div>

 综合考虑，多行文本在多层嵌套中实现垂直居中，建议使用 line-height： height 方法，单层嵌套找那个，两种方法均可以。