web布局实现方式汇总

这里将总结我平时开发web时用到的布局方法，以及示例。
大部分在stackoverflow都有很好的回答，下面直接给出链接。

Tip: 每一种布局的实现方法很多，请自行权衡 :)

div中文本元素的垂直居中

我喜欢这个：

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

方法很多，直接看stackoverflow上的回答：
Is it possible to vertically align text within a div?

div中图片的垂直居中

我还是喜欢这个：

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

参考：Vertical alignment of elements in a div

flex布局：要求一个固定宽度，另一个自适应

参考这个：
Flexbox - two fixed width columns, one flexible