css垂直居中的方法

有两种情况：

A:父盒子:块级元素有宽高 子盒子:块级元素有宽高，固定宽高

B:父盒子:块级元素有宽高 子盒子:行内元素由内容撑开，不固定宽高

1.适合A 

   父盒子position: relative; 

   子盒子position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;

2.适合A

   需要手动写死margin为子盒子宽度的一半 父盒子position: relative; 子盒子position:           absolute;left:50%; top:50%;margin-top:-15px;margin-left:-15px）

3.适合B 

  父盒子：display: table-cell; text-align: center; vertical-align: middle;

4.适合A和B ，transform 偏移

  父盒子position: relative; 

  子盒子position: absolute;top: 50%; left: 50%;transform: translate(50%,-50%);

5.适合A和B：flex布局

   父盒子display: flex;justify-content: center;align-items: center;

6.适合A和B 

  父盒子display: flex; 

  子盒子margin: auto;