标签（空格分隔）：display：table-cell 块转成行内块后的垂直居中
1:图片、多行文字、块转成行内块后的水平垂直居中
序：
图片、多行文字、块转成行内块的水平垂直居中问题，在水平方向上都不难实现，主要难在垂直方向上。
在 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
工作中最常遇到的一个问题，很有代表性。
问题的关键在于,行内块img不同于普通的行内块元素，默认基线对齐等不太一样，要实现垂直居中，不是简单父级：line-height==height能解决的。
示例1：
现在我要在logo即h1>a>img的结构中，让img垂直居中在a/h1中。这也是做每个网站的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可能不太知道，其实圈里已经是很成熟老套的做法了，简单说明下：
display:table-cell属性就是让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7不支持，这一事实在传统前端项目中大大制约了display:table-cell属性在实际项目中的应用。但是在如今这样的前端时代里，兼容到IE8几乎也是很少见的了。一般都是现代浏览器即：IE9+，兼容性不用太担心了。除非你们公司的项目目标人群就是那些... ...此处自行脑补。
- 单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的.
与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float,position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对垂直方向的margin值无反应，响应padding属性，具有td元素的特性。
- display:table-cell 在“图片、多行文字的水平垂直居中”中应用较多
示例1扩展：语义好更好的logo部分的处理。
logo以背景形式给，有网站名字的文字描述。毕竟爬虫在爬取站点时优先拿到h1的信息，SEO更好。
html:
<h1 class="logo_tit">
<a href="//www.jd.com" 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;
}
效果图：
还有一种方式就是，将内部块转成行内块来处理，但是垂直方向上还是不能使用LH=H的方式去处理的，而是还需要采用display：table-cell；但是父级宽度必须设置，否则由内容宽度撑开。
.nav {
/*这么处理，宽度就必须设定了*/
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前进的动力--------------------------------------
