css垂直居中的几种方法

我相信每个前端新手都会遇到垂直居中的问题，感觉写的css就是垂直居中，但是没有居中啊。
首先我要说的是不要迷信 vertical-align: middle;
这个东西还挺复杂，要是想仔细了解，建议搜索一下张鑫旭大神的博客和视频教程。

1.lineHeight方法
html

<div class="container" id="div1">
    <img src="test.png">
    <span>一行文字</span>
</div>

css

.container{
    height: 300px;
    background-color: #ccc;
}

#div1{
    line-height: 300px;
}
#div1 img{
    vertical-align: middle;
}

效果

说明
设置了lineHeight和容器高度相同，vertical-align: middle
需要知道容器的高度

2.table布局方法
html

<div class="container" id="div2">
    <div><img src="test.png"></div>
    <div><span>一行文字</span></div>
</div>

css

#div2{
    display: table;
}
#div2 div{
    display: table-cell;
    vertical-align: middle;
}

效果

说明
这种方法不需要知道容器和子元素的高度
注意我在inline元素外面套了一层div

3.绝对定位和负边距方法
html

<div class="container" id="div3">
    <img src="test.png">
    <span>一行文字</span>
</div>

css

#div3{
    position: relative;
}
#div3 img{
    position: absolute;
    top:50%;
    left:50%;
    margin: -70px 0 0 -94px;
}

效果

说明
我只定位了图片，水平和垂直都居中了，
这种方法需要知道子元素的宽高。

4.绝对定位和auto边距方法
html

<div class="container" id="div4">
    <img src="test.png">
    <span>一行文字</span>
</div>

css

#div4{
    position: relative;
}
#div4 img{
    position: absolute;
    top:0;
    bottom:0;
    margin: auto;
}

效果

说明
这个也是只定位了图片，
这个方法不需要知道容器和子元素的高度。

5.上下相同内边距方法
html

<div class="container" id="div5">
    <div>
        <p>一行文字</p>
        <p>一行文字</p>
    </div>
</div>

css

#div5{
    height: auto;
}
#div5 div{
    padding: 20px 0;
}

效果

说明
这里我只放了文字，去掉了容器固定高度。
这种方法比较直接，只是增加了上下padding，看上去是居中。

6.float方法
html

<div class="container" id="div6">
    <div id="floater"></div>
    <img src="test.png">
</div>

css

#floater{
    float: left;
    width: 100%;
    height: 50%;
    margin-bottom: -70px;
}
#div6 img{
    clear: both;
}

效果

说明
这里只定位了图片
这种方法通过插入了一个float元素，来定位到居中位置，需要知道子元素的高度。

7.flexbox方法
html

<div class="container" id="div7">
    <img src="test.png">
    <span>一行文字</span>
</div>

css

#div7{
    display: flex;
    align-items: center;
}

效果

说明
新世纪css布局方法，非常方便，不需要知道容器和子元素的高度。
唯一缺点兼容性还是问题，但是现在最新的浏览器基本都支持了，微信X5也支持了。

8.translate方法
html

<div class="container" id="div8">
    <img src="test.png">
    <span>一行文字</span>
</div>

css

#div8{
    position: relative;
}
#div8 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#div8 span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

效果

说明
这个方法也不错，不过还是兼容性问题。

总结
1.这些例子我都是在chrome里跑的，兼容写法自己研究吧
2.在垂直居中的时候，先看容器和子元素的高度是否固定，来选择方法