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 第二種方...