一、水平居中
1.行內元素水平居中
利用 text-align: center 可以快速實現塊級元素內部行內元素水平的居中。此方法對inline、inline-block、inline-table和inline-flex等行內元素水平居中有效。
如果塊級元素內部包著另外乙個塊級元素，我們可以將內部塊級元素轉變為行內塊元素，再通過設定元素居中以達到水平居中。
demo
這種情形可以有多種實現方式:
①將該塊級元素左右外邊距margin-left及margin-right設定為auto值，注意外部元素需要同為塊級元素
.child將子元素設定為**，後設定水平居中
display:table在表現上類似block元素，但是寬度為內容寬。
demo
父元素設定為相對定位，子元素設定為絕對定位，向右移動子元素，移動距離為父容器寬度的一半，然後向左移動子元素寬度的一半達到水平居中。
demo
④使用flex+justify-content
通過css3中flex中的justify-content屬性來使元素達到水平居中。
demo
通過flex將父容器設定為為flex布局，再設定子元素居中。
demo
①利用flex布局
利用彈性布局(flex)，實現水平居中，其中justify-content 用於設定彈性盒子元素在主軸（預設橫軸）方向上的對齊方式，本例中設定子元素水平居中顯示。
#container將要水平排列的塊狀元素設為display:inline-block，然後在父級元素上設定text-align:center，達到與上面的行內元素的水平居中一樣的效果。
.container
.inline-block
對於定寬的浮動元素，通過子元素設定relative + 負margin
對於不定寬的浮動元素，父子容器都用相對定位
通用方法(不管是定寬還是不定寬)：flex布局
①定寬的非浮動元素
通過子元素設定relative + 負margin(寬度的一半)：
注意：樣式設定在浮動元素本身
.child
居中的浮動元素
通過父子容器都相對定位( 不建議 )：
eg: 謹記清除浮動，給外部元素加上float。這裡的父元素就是外部元素
浮動的
居中的.box
p
利用彈性布局(flex)的justify-content屬性，實現水平居中。
.parent
.chlid
居中的浮動元素
通過子元素絕對定位，外加margin: 0 auto來實現。
絕對定位的元素水平居中對齊。
.parent
.child
1.單行內聯元素垂直居中，關鍵通過line-height屬性與height等值實現
單行內聯元素垂直居中。。
①利用flex布局（flex）
利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。這種方式在較老的瀏覽器存在相容性問題。
dance like nobody is watching, code like everybody is.
dance like nobody is watching, code like everybody is.
dance like nobody is watching, code like everybody is.
利用表布局的vertical-align: middle可以實現子元素的垂直居中
the more technology you learn, the more you realize how little you know.
the more technology you learn, the more you realize how little you know.
the more technology you learn, the more you realize how little you know.
①使用absolute+負margin(已知高度寬度)
通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現
固定高度的塊級元素垂直居中。
.parent
.child
當垂直居中的元素的高度和寬度未知時，可以借助css3中的transform屬性向y軸反向偏移50%的方法實現垂直居中。部分瀏覽器存在相容性的問題。
未知高度的塊級元素垂直居中
.parent
.child
通過設定flex布局中的屬性align-items，使子元素垂直居中。
未知高度的塊級元素垂直居中
.parent
通過將父元素轉為**單元格顯示（ 和 ），再通過設定 vertical-align屬性，使**單元格內容垂直居中。
demo
這種情形也是有多種實現方式：
方法1：絕對定位與負邊距實現（已知高度寬度）
這種方式需要知道被垂直居中元素的高和寬，才能計算出margin值，相容所有瀏覽器。
/ css部分
#container
#center
center
這種方式無需知道被垂直居中元素的高和寬，不能相容低版本的ie瀏覽器。
#container
#center
利用css3的transform，可以輕鬆的在未知元素的高寬的情況下實現元素的垂直居中。
css3的transform固然好用，但在專案的實際運用中必須考慮相容問題，大量的hack**可能會導致得不償失，( 例如3d渲染加速帶來的文字抖動失真的問題 )
#container
#center
利用flex布局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。不能相容低版本的ie瀏覽器。
#container容器元素設為 flex 布局或是grid布局，子元素只要寫 margin: auto 即可,不能相容低版本的ie瀏覽器。
#container
#center
css 元素居中
水平居中 1.行內標籤 和行內塊級標籤可以設定 text algin center 2.塊級標籤 margin 0 auto 對浮動元素或絕對定位元素無效 不識別auto。3.浮動的元素 定位加left 50 transform translate 50 0 垂直居中 1.行內標籤 和行內塊級標籤可...
css 元素居中
元素有寬高 未知寬高 水平居中 1.margin 2.text align 3.position absolute和0 4.position absolute和負margin 5.translatex 6.flex 7.table cell 1.translatex 2.flex 3.table c...
css元素居中
注意 這個方法對浮動元素或是絕對定位元素無效，這個元素要居中的前提條件是元素的寬度設定了，並且display屬性為block 塊 並且不能設定浮動，否則不起作用 只能對 按鈕 文字等行內元素進行水平居中 display inline或display inline block等 text align ...