標(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的正方形容器中水平和垂直居中刊咳。”
工作中最常遇到的一個問題儡司，很有代表性娱挨。
問題的關(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="###"></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;
}
效果圖：
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)人群就是那些... ...此處自行腦補氮帐。
- 單元格有一些比較特別的屬性，例如元素的垂直居中對齊洛姑，關(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擴展：語義好更好的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;
}
效果圖：
----------------------------------------------------喜歡就動動小手哈。------------------------------------------------------
--------------------------------------你的支持是灑家-麥殼-macrolam前進的動力--------------------------------------
