1、margin+定寬：
width: 100px;margin: 0 auto;2、table + margin：
display: table;margin: 0 auto;(display: table 在表現上類似 block 元素，但是寬度為內容寬。)
3、inline-block + text-align:(用於多個塊級元素)
.child相容性佳（甚至可以相容 ie 6 和 ie 7）.parent
4、 absolute + margin-left：
.parent寬度固定.child
相比於使用transform ，有相容性更好
5、 absolute + transform:
.parent絕對定位脫離文件流，不會對後續元素的布局造成影響。.child
transform 為 css3 屬性，有相容性問題
6、 flex + justify-content
.parent只需設定父節點屬性，無需設定子元素
flex有相容性問題
垂直居中：vertical-align:middle;
父元素高度不確定的文字，，塊級元素的豎直居中：給父元素設定相同的上下邊距實現
父元素高度確定的單行文字垂直居中：line-height值與父元素的高度值相同
1、table-cell + vertical-align：
.parent相容性好(ie 8以下版本需要調整頁面結構至 table)
2、absolute + transform:
.parent絕對定位脫離文件流，不會對後續元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。.child
transform 為 css3 屬性，有相容性問題
同水平居中，這也可以用margin-top實現，原理水平居中
3、flex + align-items:
如果說absolute強大，那flex是最強的。但它有相容問題
.parent1、absolute + transform
.parent絕對定位脫離文件流，不會對後續元素的布局造成影響。.child
transform 為 css3 屬性，有相容性問題
2、inline-block + text-align + table-cell + vertical-align
.parent3、flex + justify-content + align-items.child
相容性好
.parent
css td居中 div居中方法總結
行級元素 塊級元素 display table 此元素會作為塊級 來顯示 類似 前後帶有換行符.display table cell 此元素會作為乙個 單元格顯示 類似 和 塊級元素 利用flex布局使內部塊級元素水平，垂直居中 display flex justify content center...
div居中的方法
css 如何使div層水平居中 今天用css碰到個很棘手的問題,div本身沒有定義自己居中的屬性,網上很多的方法都是介紹用上級的text align center然後巢狀一層div來解決問題.可是事實上這樣的方法科學嗎?經過網路搜尋和親自實驗得出以下結論 正確的也是對頁面構造沒有影響的設定如下 對需...
div居中的方法
居中，這是個老生常談的問題。我一直以為這個根本不用去想他，用多了自然知道，沒想到在一次面試上碰到，腦子裡一時居然想不起來，妥妥的是掛了，回家趕緊做下筆記 先上html的內容 father son再是一部分預設的樣式 需求是 讓son在father裡上下居中。第一種方法 father son 第二種方...