網頁制作Webjx文章簡介：CSS 居中大全
我看最近微博流行 CSS 居中技術，老外碼農爭相寫相關的文章，一篇賽一篇的長啊，我把幾篇歸納總結了一下，算是筆記。
孔乙己曾說：“茴香豆的回字有四種寫法”，萬一哪天有個面試官問你：“居中一共有幾種寫法”呢，哈哈，先備著吧~~
各種方法各有利弊，大家自己權衡吧，至少在需要居中時多個思路。
不建議用了。
text-align:center在父容器里水平居中 inline 文字，或 inline 元素
vertical-align:middle垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。
line-height與 height 聯手，垂直居中文字
margin:auto示例：
Hello World</div></div> hacks, hacks（小技巧）有許多，負 margin，影子元素 ::before 等。如果你的內容不是固定大小的話，它們大部分是很脆弱的。
translate(-50%,-50%)用 position 加 translate translate(-50%,-50%) 比較奇特，百分比計算不是以父元素為基準，而是以自己為基準。
參考文章：居中百分比寬高的元素
示例：
Hello World</div></div>
這個技巧相當囂張，同樣適用于沒固定大小的內容，min-width，max-height，overflow:scroll等。
絕對定位居中父容器元素：position: relative
}
注意：高度必須定義，建議加 overflow: auto，防止內容溢出。
視口居中內容元素：position: fixed，z-index: 999，記住父容器元素 position: relative
}
響應式百分比寬高，最大、最小寬度均可以，加 padding 也可以
}
偏移只要 margin: auto; 在，內容塊將垂直居中，top, left, bottom, right 可以設置偏移。
}
溢出居中內容比父容器高時，防止溢出，加 overflow: auto （沒有任何 padding 時，也可以加 max-height: 100%;）。
}
調整尺寸resize 屬性可以讓尺寸可調。 設置 min- /max- 限制尺寸，確定加了 overflow: auto 。
}
圖像圖像同樣適用，設置 height: auto;
}
可變高度高度必須定義，但可以是百分比或 max-height。不想定義高度的話，用 display: table （需要考慮 Table-Cell 兼容性）。
}
負 margin確切知道寬高，負 margin 是寬和高的一半。
}
Table-Cell參考文章：Flexible height vertical centering with CSS, beyond IE7
結構：
</div>
樣式：
}
FlexBox參考文章：Designing CSS Layouts With Flexbox Is As Easy As Pie
}
參考資料：
*
*
*
*
* Vertical Centering With CSS
新聞熱點
疑難解答
