css水平居中、垂直居中、水平垂直居中
水平居中
行內元素：block+text-align
塊級元素：
方案一：分寬度定不定兩種情況
定寬度——margin： 0 auto；（作用：使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離）；
不定寬度——設定子元素display: inline-block或display: inline, 即將子元素轉換成行內塊級/行內元素，給父元素設定 text-align: center
方案二：使用定位屬性
首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的left:50%，即讓子元素的左上角水平居中；
定寬度——設定絕對子元素的margin-left：- 元素寬度的一半px；或者設定transform：translatex(-50%);注：這時margin-left的值是相對于父元素的偏移；translatex(-50%)是相對於子元素本身的偏移。
不定寬度——利用css3新增屬性transform: translatex(-50%);
方案三：使用flexbox布局實現（寬度定不定都可以）
只需要給待處理的塊狀元素的父元素新增屬性 display: flex; justify-content: center;
垂直居中
單行的行內元素：只需要設定單行行內元素的「行高等於盒子的高」即可；
多行的行內元素：使用tabel，給父元素設定display: table-cell; 和 vertical-align: middle;
塊級元素：
方案一：使用定位
首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的top: 50, 即讓子元素的左上角垂直居中；
定高度：設定絕對子元素的margin-top: - 元素高度的一半px; 或者設定transform: translatey(-50%);
不定高度：利用css3新增屬性transform: translatey(-50%);
方案二：使用flexbox布局實現（高度定不定都可以）
使用flexbox布局，只需要給待處理的塊狀元素的父元素新增屬性 display: flex; align-items: center;
水平垂直居中
已知高度和寬度的元素：
方案一設定父元素為相對定位，給子元素設定絕對定位， top: 0; right: 0; bottom: 0; left: 0; margin: auto;（相容性：ie7及之前版本不支援）
(思考：為什麼這樣就可以實現居中呢？)
left: 0; right: 0;
top: 0; bottom: 0;
這四個語句表示把元素充滿容器，同時自身指定了寬度，總寬度（固定）= width（固定） + margin-left + margin-right；
margin: auto;
當margin設定為auto的時候，左右邊距會平分，元素自然就居中了，垂直居中原理一致。
方案二設定父元素為相對定位，給子元素設定絕對定位，
left:50%; top: 50%;
margin-left: - 元素寬度的一半px; margin-top: -元素高度的一半px;
未知高度和寬度的元素
方案一：使用定位屬性
設定父元素為相對定位，給子元素設定絕對定位，
left:50%; top: 50%;
transform: translatex(-50%); transform: translatey(-50%);
方案二：使用flex布局實現
設定父元素為flex定位
justify-content: center; align-items: center;
方案三：使用table
將父元素設定為display: table; 將子元素設定為display: table-cell; text-align: middle; vertical-align: middle;
參考
如何將乙個div水平垂直居中？6種方法做推薦
css水平居中+垂直居中+水平/垂直居中的方法總結
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
居中 水平 垂直 水平垂直
將子元素的display設定為inline block，使子元素變成行內元素 這種方法的不足之處在於，子元素的text align繼承了父元素的center，文字也居中顯示，所以需要在子元素中設定text align left 思路二 在本身元素設定margin 0 auto實現塊級元素水平居中 若...