行內元素的水平居中
要實現行內元素（、等）的水平居中，只需把行內元素包裹在塊級父層元素（、
text-align:center;並且適用於文字，鏈結，及其inline或者inline-block、inline-table和inline-flex。
demo
塊狀元素的水平居中
要實現塊狀元素（display:block）的水平居中，我們只需要將它的左右外邊距margin-left和margin-right設定為auto，即可實現塊狀元素的居中，要水平居中的塊狀元素css設定如下：
margin:0 auto;多個塊狀元素的水平居中
要實現多個水平排列的塊狀元素的水平居中，傳統的方法是將要水平排列的塊狀元素設為display:inline-block，然後在父級元素上設定text-align:center，達到與上面的行內元素的水平居中一樣的效果。
text-align:center;display:inline-block;已知高度寬度元素的水平垂直居中
法一 絕對定位與負邊距實現
利用絕對定位，將元素的top和left屬性都設為50%，再利用margin邊距，將元素回拉它本身高寬的一半，實現垂直居中。核心css**如下：
#container
#center
demo
法二 絕對定位與margin
這種方法也是利用絕對定位與margin，但是無需知道被垂直居中元素的高和寬。核心**如下：
#container
#center
（同上故不再截圖）
demo
未知高度和寬度元素的水平垂直居中
法一. 當要被居中的元素是inline或者inline-block元素
當要被居中的元素是inline或者inline-block的時候，可以巧妙的將父級容器設定為display:table-cell，配合text-align:center和vertical-align:middle即可以實現水平垂直居中。
核心**如下：
display:table-cell;
text-align:center;
vertical-align:middle;
法二. css3顯威力
利用css3的transform，可以輕鬆的在未知元素的高寬的情況下實現元素的垂直居中。
核心**如下：
#container
#center
demo
基於flexbox的解決方案
這是毋庸置疑的最佳解決方案，因為flexbox（伸縮盒）是專門針對這類需求所設計的。我們之所以要討論其他方案，僅僅是因為那些方案在瀏覽器的支援程度上稍微好一些而已。其實目前現代瀏覽器對 flexbox 的支援度已經相當不錯了。
我們只需寫兩行宣告即可：先給這個待居中元素的父元素設定 display: flex（在這個例子中是元素），再給這個元素自身設定我們再熟悉不過的margin: auto（在這個例子中是元素）：
body
main
請注意，當我們使用flexbox時，margin: auto不僅在水平方向上將元素居中，垂直方向上也是如此。還有一點，我們甚至不需要指定任何寬度（當然，如果需要的話，也是可以指定的）：這個居中元素分配到的寬度等於 max-content。
如果瀏覽器不支援flexbox，頁面渲染結果看起來就跟我們的起點圖是一樣的了（如果設定了寬度的話）。雖然沒有垂直居中效果，但也是完全可以接受的。
flexbo 的另乙個好處在於，它還可以將匿名容器（即沒有被標籤包裹的文字節點）垂直居中。
我們先給這個元素指定乙個固定的尺寸，然後借助flexbox 規範所引入的align-items和justify-content屬性，我們可以讓它內部的文字也實現居中（我們可以對使用相同的屬性來使元素居中，但margin: auto方法要更加優雅一些，並且同時起到了回退的作用）。
main
用flexbox把匿名文字框居中
網格布局解決方案
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
css垂直水平居中方法
1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...
CSS水平垂直居中方式
1.grid布局實現 一 father 2.grid布局實現 二 father 3.grid配合margin實現 father son 4.flex布局實現 father 5.flex配合margin實現 father son 6.使用display table cell實現 father son ...