今天面试遇到一个问题好牛逼的问题，cSS的！

Question

<div></div>
请问怎么让<div>元素垂直居中！div的高度为0，并且不能少于三种方法！请大神解答！div里面是没有任何内容来撑开div的高！

Answer 1

关于垂直、水平居中等布局，你可以参见此片文章
【整理】CSS布局方案

方法一：table-cell + vertial-align

.parent{
    display: table-cell;
    vertical-align: middle;
}

方法二： absolute + transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
}

方法三：flex + align-items

.parent{
    display: flex;
    align-items: center;
}

Answer 2

1.transform
2.flex
3.table
4.特殊情况的margin

这是基础中的基础，应该条件反射般的回答出来的，并不是什么牛逼问题，题主平时要多注意积累啊。

Answer 3

看到这个问题我第一反应是如何在不设置height的情况下给div有个高度，哈哈哈，所以我的想法是通过padding或者是border让div有个高度，然后居中后面就跟上面的答主说的差不多了

Answer 4

用display: inline-block;献个丑了，虽然有点离题了，前面的差不多都说完了，

   .parent{
        width: 1000px;
        margin: 0 auto;
        background: #cccccc;
        height: 1000px;             
    }
    .parent:before{
        content: '';
        height: 100%;
        width: 0;
        vertical-align: middle;
        display: inline-block;
    }
.child{
    display: inline-block;
    vertical-align: middle;
}

行高

 .parent{
        width: 1000px;
        margin: 0 auto;
        background: #cccccc;
        height: 1000px;      
       line-height: 1000px;
    }
   .child{
   display: inline-block;
   }

老版本flex

   .parent{
     width: 1000px;
        margin: 0 auto;
        background: #cccccc;
        height: 1000px;      
       display: -webkit-box;
       display: -moz-box;    
        -webkit-box-align:center;
        -moz-box-align: center;
    }