面試時遇到這個問題，當時答得很不全面，有必要做個總結。
一、水平居中的實現
1. 行內元素解決方案
在行內元素的父級 block 元素加上text-align: center;即可。
2.塊級元素解決方案
在需要水平居中的塊級元素設定margin: 0 auto;即可（含義為上下 margin 為 0，左右 margin 自動調整）
3.多個塊級元素解決方案
將需要垂直的塊級元素都設定display: inline-block，然後在父級塊級元素設定text-align:center;。原理有點類似設定行內元素水平居中，需要調整父級塊級元素和子塊級元素的寬（不然會有右圖的效果）。
4.多個塊級元素解決方案（flexbox 布局實現）
如果想要這些塊級元素在一行內水平居中實現（如下圖），在父級塊級元素填上以下**：
如果期望效果呈一列垂直居中（如下圖），在父級塊級元素填上以下**：
二、垂直居中實現
1.行內元素解決方案
在需要設定垂直的行內元素設定line-height屬性，值與父級元素的height值相同。（關於line-height的研究：可移步張鑫旭老師的 css行高line-height的一些深入理解及應用）
2.多行的行內元素解決方案
在父級塊級元素設定以下**即可。
3.已知高度的塊狀元素解決方案
設定父級元素position: relative;，已知高度的塊級元素設定下面的**：
position
: absolute;
top: 50%;
margin-top
: -40px;
//此為該元素高度的一半
三、水平垂直居中
1.塊級元素解決方案
設定父級元素position: relative;，已知高度和寬度的塊級元素設定下面的**：
優點：1. 相容性好 support ie8+；2. 支援百分比寬高
缺點：1. 必須宣告高度；2. 不適用windows phone
2.已知高度寬度的塊級元素解決方案
設定父級元素position: relative;，已知高度和寬度的塊級元素設定下面的**：
position: absolute;
top: 50%;
left: 50%
margin-top: -40px; //此為該元素高度的一半
margin-left: -40px; //此為該元素寬度的一半
（效果圖同1）
優點：相容性好 support all browser
缺點：定寬高且不支援百分比
3.未知高度和寬度元素解決方案
設定父級元素position: relative;，已知高度和寬度的塊級元素設定下面的**：
position: absolute;
top: 50%;
left: 50%
transform: translate(-50%, -50%);
原理：當用top：50％; left：50％;是以左上角為原點，故不處於中心位置
translate（-50％, -50％）作用是，往上（x軸），左（y軸）移動自身長寬的50％，以使其居於中心位置
（效果圖同1）
優點：1. 不用定寬高
缺點：1. 瀏覽器相容性（適合移動端）；2. 廠商字首；3. 可能與其他transform屬性衝突
4.使用 flexbox 實現水平垂直居中
父級元素設定以下**即可。
display
: flex;
justify-content
:center;
align-items
: center;
（效果圖同1）
優點：1. 不定寬高；2. 使用方便；3. 未來 css 發展趨勢
缺點：1. 瀏覽器相容性（適合移動端）；2. 廠商字首；
總結：從上面我們可以發現在實現水平垂直方面，flex布局真的是非常好用，而且是未來css發展的趨勢，每乙個前端都必須掌握。
(關於flex的學習可以參照阮一峰老師的 flex 布局教程：語法篇 以及 flex 布局教程：例項篇)
參考文章： css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
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...