position、table-cell、flex-box三種垂直（水平）居中技巧
position:
父元素子元素
注：需要父元素和子元素都定義寬高
display:table-cell:
父元素子元素
注：能夠使大小不固定的元素實現垂直居中布局，除了常見的實現不同寬高的垂直居中，還能做到自適應兩欄布局
另外table-cell還能自動使多個子元素等寬分布，不需要自己計算寬度
1、ie6/7不支援; 2、table-cell不支援margin屬性（但支援padding）; 3、盡量不要和浮動/定位同時用，會破壞它的css屬性。
flex-box:
父元素注：原理是使flex-box的子元素（伸縮專案）沿著側軸方向（當預設flex-direction:row時，側軸就是垂直方向）居中對齊。
使用flex-wrap，還可以使伸縮容器裡的內容摺疊顯示
摘自
css水平垂直居中三種實現方法
方法一 使用dispaly inline block 和 vertical align 還有偽類實現 block1 block1 before center1 方法二 使用相對定位或者固定定位和transform來實現。ie8及以下不支援 block2 center2 方法三 使用display t...
三種方法實現垂直水平居中詳解
即display flex 首先看看html布局 class wrap class content div div content通常是指需要垂直水平居中的元素 wrap就是它的父元素 設定父元素display flex成為乙個彈性盒子 justify content center設定其子元素水平居...
css水平垂直居中三種實現方法
方法一 使用dispaly inline block 和 vertical align 還有偽類實現 block1 block1 before center1 方法二 使用相對定位或者固定定位和transform來實現。ie8及以下不支援 block2 center2 方法三 使用display t...