標(biāo)簽（空格分隔）：display：table-cell 塊轉(zhuǎn)成行內(nèi)塊后的垂直居中

1:圖片、多行文字、塊轉(zhuǎn)成行內(nèi)塊后的水平垂直居中

序：

圖片、多行文字、塊轉(zhuǎn)成行內(nèi)塊的水平垂直居中問題，在水平方向上都不難實現(xiàn)，主要難在垂直方向上。
在 淘寶UED 招聘 中有這樣一道題目：

“使用純CSS實現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中?！?/p>

工作中最常遇到的一個問題，很有代表性。
問題的關(guān)鍵在于,行內(nèi)塊img不同于普通的行內(nèi)塊元素，默認(rèn)基線對齊等不太一樣，要實現(xiàn)垂直居中，不是簡單父級：line-height==height能解決的。

示例1：

現(xiàn)在我要在logo即h1>a>img的結(jié)構(gòu)中，讓img垂直居中在a/h1中。這也是做每個網(wǎng)站的logo時常常遇到的問題。水平都不難，父級給tac即可。

html:

<div class="nav">
    <h1 class="logo"><a href="###">![](images/logo.png)</a></h1>
</div>

css:

        h1{
            height: 90px;
        }

        h1  a{
            display: inline-block;
            height: 90px;
            background: #ff6600;
            //父級身上：主要是這兩條
            display: table-cell;
            vertical-align:middle;
            }
        h1  a img{
             //自己身上：
            vertical-align: middle;
        }

效果圖：

Paste_Image.png

tip：display：table-cell

• 一些剛接觸前端的童鞋對display：table-cell可能不太知道，其實圈里已經(jīng)是很成熟老套的做法了，簡單說明下：

display:table-cell屬性就是讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類似于td標(biāo)簽。目前IE8+以及其他現(xiàn)代瀏覽器都是支持此屬性的，但是IE6/7不支持，這一事實在傳統(tǒng)前端項目中大大制約了display:table-cell屬性在實際項目中的應(yīng)用。但是在如今這樣的前端時代里，兼容到IE8幾乎也是很少見的了。一般都是現(xiàn)代瀏覽器即：IE9+，兼容性不用太擔(dān)心了。除非你們公司的項目目標(biāo)人群就是那些... ...此處自行腦補(bǔ)。

• 單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關(guān)聯(lián)伸縮等，所以display:table-cell還是有不少潛在的使用價值的.

與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float,position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不用同用。設(shè)置了display:table-cell的元素對寬度高度敏感，對垂直方向的margin值無反應(yīng)，響應(yīng)padding屬性，具有td元素的特性。

• display:table-cell 在“圖片、多行文字的水平垂直居中”中應(yīng)用較多

示例1擴(kuò)展：語義好更好的logo部分的處理。

logo以背景形式給，有網(wǎng)站名字的文字描述。畢竟爬蟲在爬取站點時優(yōu)先拿到h1的信息，SEO更好。

html:

<h1 class="logo_tit">
    <a  class="logo_tit_lk">京東</a>
</h1>

css:

.logo_tit_lk {
    overflow: hidden;
    display: block;
    width: 190px;
    height: 170px;
    background-image: url(//misc.360buyimg.com/mtd/pc/index/home/images/logo.v2.png);
    background-repeat: no-repeat;
    text-indent: -999px;
}

1:塊級在父級盒子里怎么做水平垂直居中

序：

這個也是工作中常常遇到的問題。這個就是比較好解決和想到的。比較典型的做法：下邊是emmet語法簡寫，如果你看不懂。請看下邊代碼。

父級：
por
子級：
poa
top:50%
left:50%
mt:--自身高度/2
ml:--自身 寬度/2

示例2：

html:

<div class="nav">
    <div class="navIn"></div>
</div>

css:

        .nav {
            height: 200px;
            background:hotpink;
            //核心代碼
            position: relative;
        }

        .navIn {
            height: 100px;
            width: 100px;
            background: lightblue;
            //核心代碼
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

效果圖：

父級占滿屏幕

還有一種方式就是，將內(nèi)部塊轉(zhuǎn)成行內(nèi)塊來處理，但是垂直方向上還是不能使用LH=H的方式去處理的，而是還需要采用display：table-cell；但是父級寬度必須設(shè)置，否則由內(nèi)容寬度撐開。

        .nav {
            /*這么處理，寬度就必須設(shè)定了*/
            width: 999px;
            height: 200px;
            background: hotpink;
            
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

        .navIn {
            height: 100px;
            width: 100px;
            background: lightblue;
            
            display: inline-block;
            vertical-align: middle;
        }

效果圖：

父級寬度單設(shè)，注意右側(cè)有留白

----------------------------------------------------喜歡就動動小手哈。------------------------------------------------------

--------------------------------------你的支持是灑家-麥殼-macrolam前進(jìn)的動力--------------------------------------