垂直居中在專案中有廣泛應用，而且在各個公司面試中貌似被問到的情況也比較多，這裡總結了一些常用的方法以及一些比較怪異的方法，僅供參考。
先設定下基礎樣式
section
.block
justify-content和align-items輕鬆實現水平以及垂直居中，而且不用在意父元素和子元素的高度。
display: table-cell，相當於是**的td，單元格所包含的內聯元素可以實現垂直居中。
這裡可以使用calc()方法，但需要已知子元素寬高。
如果子元素大小不確定，可以使用js來改變位置。
這種方法需要多加乙個內聯元素，讓它的高度和父級元素的高度一致，再通過vertical-align: middle來實現。
transform-origin預設在50% 50%，所以看起來就是居中的效果了
所有實現了水平居中的，可以讓父元素旋轉90度，子元素再反方向旋轉回來
其他想到再補充
元素水平垂直居中的一些方法
1 需要水平垂直居中的元素的父級設定 position relative 再給該元素設定 position absolute top 0 right 0 left 0 bottom 0 margin auto overflow auto 不需要給該元素設定寬高 注意 高度必須定義，建議加overfl...
文字垂直居中實現方法
大家都知道css中使文字等元素水平居中的最常用的方法就是設定父盒子text align center 子盒子margin 0 auto 即可 而目前垂直居中沒有看到說明最常用的做法，現在我們給出實現元素垂直居中的幾個方法 方法一 line height 這應該是我目前知道實現垂直居中最簡單實用的方法...
實現水平居中和垂直居中的方法
一 水平居中 1.text align center 行內元素 給其父元素設定屬性 text align center 2.margin 0 auto 塊級元素 給元素本身設定 margin 0 auto 3.元素的寬度固定 ele 4.元素的寬度不固定 ele 二 垂直居中 1.line heig...