div居中的方法

2021-08-07 09:16:21 字數 581 閱讀 5330

居中,這是個老生常談的問題。

我一直以為這個根本不用去想他,用多了自然知道,沒想到在一次面試上碰到,腦子裡一時居然想不起來,妥妥的是掛了,回家趕緊做下筆記

先上html的內容 

.father

.son

再是一部分預設的樣式

需求是:讓son在father裡上下居中。

第一種方法:

.father

.son

第二種方法:

.father

第三種方法

.father

第四種方法

.father

.son

第五種方法,這種方法實質上是第一種的變形,將margin改為了translate而已

.son
暫時能想到的就那麼多,其實夠用就行。

div居中的方法

css 如何使div層水平居中 今天用css碰到個很棘手的問題,div本身沒有定義自己居中的屬性,網上很多的方法都是介紹用上級的text align center然後巢狀一層div來解決問題.可是事實上這樣的方法科學嗎?經過網路搜尋和親自實驗得出以下結論 正確的也是對頁面構造沒有影響的設定如下 對需...

div水平居中及div水平垂直居中的方法總結

1 margin auto wrap wrap txt2 text align center 3 absolute margin偏移 wrap wrap txt4 display box 文字 box pack5 absolute transform 1 line height 文字 wrap tx...

居中div的方法總結

1 margin 定寬 width 100px margin 0 auto 2 table margin display table margin 0 auto display table 在表現上類似 block 元素,但是寬度為內容寬。3 inline block text align 用於多個...