css样式居中布局

                                                                    css样式居中布局

1. flex(布局利器)

    一、实现左右对称，中间自动填满布局，只要中间设置flex:1就可以

二、居中 align-items属性

 flex-start | flex-end | center | baseline | stretch

 

 2.position

top:50%;

transform: translateY(-50%);//自身高度的50%

二、如何让width和height自动填满,当上部或者左侧有元素时

right:0 //width填满

bottom:0 //height填满

 

3.table

display:table   

子元素：display:table-cell  vertical-align:middle

参考：

https://www.zhihu.com/question/20543196

https://segmentfault.com/a/1190000014116655