如何让一个div里面的div垂直居中？

CSS3时代当然要用CSS3的完美解决办法。不能忍受以前的height和line-height同高等等的解决方法，想想都觉得不优雅。

用CSS3中的flexbox 布局模式：

.vertical-container{
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
              align-items: center;
        -webkit-justify-content: center;
              justify-content: center;
    }

CSS里总算是有了一种简单的垂直居中布局的方法了！
参考自：CSS - flexbox

1. 支持不知道宽高 支持ie10及以上

display: flex;（弹性盒子）

justify-content: center;（左右居中）

align-items: center;（垂直居中）

2.

父元素display: flex;（弹性盒子）

子元素margin: auto;（上下左右居中）

3.table-cell 支持不知道宽高 ie8 及以上

父元素display: table-cell;vertical-align: middle;

子元素margin: auto;

（或）table-cell + display

父元素display: table-cell; vertical-align: middle;text-align: center;

子元素display: inline-block;

4.position + translate 支持不知道宽高 支持ie9及以上

关键语句：父元素position: relative;

子元素position: absolute;

top: 50%;left: 50%;

transform: translate(-50%, -50%);

5.position + margin

关键语句：父元素position: relative;

子元素position: absolute;

top: 0;bottom: 0;left: 0;

right: 0;

margin: auto;

6.position+calc( )

关键语句：父元素position: relative;

子元素position: absolute;

top: calc(50% - 50px);

left: calc(50% - 50px);

7.position+负margin

关键语句：父元素position: relative;

子元素position: absolute;

top:50%;

left:50%;

margin: -50px;

8.Grid(网格布局)

兼容性不如Flex布局

关键语句：父元素display:grid;

子元素align-self: center;

justify-self: center;