摘要：种元素垂直居中根据不同情况，使用的垂直居中方式各异针对块级元素与行级元素的垂直居中不同。行级元素行内包含特殊元素如果行内包含特殊元素图片输入框元素或者粗体使用设置对齐方式即可垂直居中。
CSS种元素垂直居中
根据不同情况，使用的垂直居中方式各异：针对块级元素与行级元素的垂直居中不同。
1 行级元素 1.1 行内包含特殊元素如果行内包含特殊元素：图片、input输入框、inline-block元素或者粗体
使用verticle-align: middle;设置对齐方式即可垂直居中。text-bottom/text-top 为下对齐/上对齐
兼容性很好：IE4
1.2 设置line-height设置line-height与height值相等，可以实现行级元素或者纯文本的块级元素的垂直居中
兼容性好IE4
2 块级元素 2.1 flex和align-items设置容器元素display: flex; align-items: center;即可，其内的子元素在容器中垂直居中
缺点： 使用flex布局，并且使用CSS3的align-items属性，兼容性较差：IE11
2.2 flex和align-self设置容器元素display: flex; ，子元素设置align-self: center;
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
同样兼容性较差：IE11
2.3 绝对定位父元素设置相对定位position: relative;
子元素设置绝对定位postion: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto;
关键在于设置top: 0; left:0; bottom: 0; right: 0; margin: auto表示水平、垂直4个方向的margin值都通过计算获取
兼容性IE7