淘宝面试题之--图片、多行文本、块级等在父级盒子里怎么做居中

标签（空格分隔）：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="###">![](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可能不太知道，其实圈里已经是很成熟老套的做法了，简单说明下：

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;
        }

效果图：

父级宽度单设，注意右侧有留白

作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/3e3ca3559665