我看最近微博流行css居中技術，老外碼農爭相寫相關的文章，一篇賽一篇的長啊，我把幾篇歸納總結了一下，算是筆記。
不建議用了。
text-align:center
在父容器裡水平居中 inline 文字，或 inline 元素
vertical-align:middle
垂直居中 inline 文字，inline 元素，配合 de>display:tablede> ，de>display:table-cellde>，有奇效。
line-height
與 height 聯手，垂直居中文字
margin:auto
<style
>
#ex2_container
#ex2_content
style
>
<
div
id="ex2_container"
><
div
id="ex2_content"
>hello world
div>
div>
hacks, hacks（小技巧）
有許多 hacks ，負 margin，影子元素 ::before 等。如果你的內容不是固定大小的話，它們大部分是很脆弱的。
translate(-50%,-50%)
用 position 加 translate translate(-50%,-50%) 比較奇特，百分比計算不是以父元素為基準，而是以自己為基準。
示例：
1<
style
>
2#ex3_container
8#ex3_content
14style
>
15<
div
id="ex3_container"
><
div
id="ex3_content"
>hello world
div>
div>
這個技巧相當囂張，同樣適用於沒固定大小的內容，de>min-widthde>，de>max-heightde>，de>overflow:scrollde>等。
絕對定位居中
父容器元素：de>position: relativede>
.absolute-center
注意：高度必須定義，建議加 de>overflow: autode>，防止內容溢位。
視口居中
內容元素：de>position: fixedde>，de>z-index: 999de>，記住父容器元素 de>position: relativede>
1.absolute-center.is-fixed
響應式
百分比寬高，最大、最小寬度均可以，加 padding 也可以
1.absolute-center.is-responsive
偏移
只要 de>margin: auto;de> 在，內容塊將垂直居中，top, left, bottom, right 可以設定偏移。
1.absolute-center.is-right
溢位
居中內容比父容器高時，防止溢位，加 de>overflow: autode> （沒有任何 padding 時，也可以加 de>max-height: 100%;de>）。
1.absolute-center.is-overflow
調整尺寸
resize屬性可以讓尺寸可調。 設定min- /max-限制尺寸，確定加了 de>overflow: autode> 。
1.absolute-center.is-resizable
影象
影象同樣適用，設定 de>height: auto;de>
1.absolute-center.is-image
可變高度
高度必須定義，但可以是百分比或 max-height。不想定義高度的話，用 de>display: tablede> （需要考慮 table-cell 相容性）。
1.absolute-center.is-variable
負 margin
確切知道寬高，負 margin 是寬和高的一半。
1.is-negative
table-cell
參考文章：flexible height vertical centering with css, beyond ie7
html結構：
1<
div
class
="pos-container is-table"
>
2<
div
class
="table-cell"
>
3<
div
class
="center-block"
>
4<
!-- content -->
5div
>
6div
>
7div
>
css樣式：
1.pos-container.is-table
2.is-table .table-cell
6.is-table .center-block
flexbox
參考文章：designing css layouts with flexbox is as easy as pie
1.pos-container.is-flexbox
CSS水平居中 垂直居中的N個方法
不建議用了。text align center 在父容器裡水平居中 inline 文字，或 inline 元素 vertical align middle 垂直居中 inline 文字，inline 元素，配合 display table display table cell，有奇效。line he...
CSS水平居中 垂直居中的N個方法
不建議用了。text align center 在父容器裡水平居中 inline 文字，或 inline 元素 vertical align middle 垂直居中 inline 文字，inline 元素，配合display table，display table cell，有奇效。line hei...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...