多行文字垂直居中

在說到這個問題的時候，也許有人會問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 方法，單層嵌套找那個，兩種方法均可以。