1、使用絕對定位垂直居中
絕對對位原理：元素在過度受限情況下，將margin設定為auto，瀏覽器會重算margin的值，過度受限指的是同時設定top/bottom與height或者left/right與width。
.absolute_center優點：支援響應式，只有這種方法在resize之後仍然垂直居中
缺點：沒有顯式設定overflow時，內容超過元素高度時會溢位，沒有滾動條
2、負margintop方式
已知元素高度後，使用絕對定位將top設定為50%，mergin-top設定為內容高度的一半(height padding) / 2；內容超過元素高度時需要設定overflow決定滾動條的出現
原理：top：50%元素上邊界位於包含框中點，設定負外邊界使得元素垂直中心與包含框中心重合；
.negative_margin_top缺點：不支援響應式(不能使用百分比、min/max-width)
3、借助額外元素floater
元素高度已知，在center元素外插入乙個額外元素floater，設定floater的height為50%；margin-bottom為center元素高度的一半(height padding) / 2。內容超過元素高度時需要設定overflow決定滾動條的出現。
原理與2方法類似，floater的下邊界是包含框的中心線，負下外邊界保證center的中心線與包含框中心線重合。
.floater
.floater_center
缺點：需要額外元素，不支援響應式
4、table-cell方式
將center元素的包含框display設定為table，center元素的display設定為table-cell，vertical-align設定為middle。
原理：利用表布局特點，vertical-align設定為middle後，單元格中內容中間與所在行中間對齊
.container2
.table_cell
缺點：每乙個需要垂直居中的元素都會需要加上額外標籤（需要table、table-cell兩個額外元素）
5、inline-block方式
將center元素display設定為inline-block，vertical-align設定為middle，為包含框設定after偽元素，將偽元素display設定為inline-block,vercial-align設定為middle，同時設定height為100%，撐開容器。
原理：為同一行的inline-block元素設定vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。
.container
/*inline-block的前世今生*/
.container:after
.inline_block
缺點：會加上額外標記
6、line-height方式
該方式只適用於情況比較簡單的單行文字，將line-height設定與元素高度同高。
原理：如果line-height高度大於font-size，生於高度瀏覽器會平分到文字上下兩端。
其實我們每個人的生活都是乙個世界，即使最平凡的人也要為他生活的那個世界而奮鬥。
.single_line缺點：只適用於單行文字，侷限性大
7、彈性盒式布局
利用彈性盒式布局，將字元素的主軸、側軸的排列方式都設定為居中對齊
原理：使用css彈性盒
.is-flexbox【猿2048】www.mk2048.com
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
css 垂直居中
先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...