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.在垂直居中的时候，先看容器和子元素的高度是否固定，来选择方法