說到布局除了浮動以及定位外還有乙個不得不提的點,那就是居中,居中問題我們在網頁布局當中經常遇到,那麼以下就是分為兩部分來講,一部分是傳統的居中,另一種則是flex居中,每個部分又通過分為水平垂直居中來講。
1.1水平居中
1.1.1 inline
對於inline元素以及純文字只需要為父元素設定text-align: center;適用於 inline, inline-block, inline-table, inline-flex
1.1.2 block
對於block元素則需要為想要居中的block設定margin: 0 auto;
1.1.3 more-block:
多個塊級元素直接居中同單個塊級居中一樣,但是如果要在單行內居中,需要先通過display: inline-block將塊級元素轉化為行內塊元素再按照行內元素為父元素新增text-align: center的居中方式居中。
1.2垂直居中
1.2.1 inline
單**況下,可以為父元素設定相同的上下padding實現居中
如果只是單行文字也可以設定行高等于父元素高度實現居中
如果設定上下相同padding沒有用的話,可能該元素是**,可以使用vertical-align: middle設定對齊基線為middle實現居中。
1.2.2 block
要居中的元素高度固定的情況下,可以使用position來定位,設定top為50%,但是因為top是盒子上邊界的定位距離,所以還要通過負值的margin-top往回拉寬度的一半。
(以下只寫核心**,其他寬度高度border自己加)
但是如果高度不固定的話則可使用變換來替換margin負值達到動態高度的一半.parent
.child
1.3水平垂直都居中// 只需要替換上面的margin-top
: -50px; height可以直接去掉了
transform
:translatey
(-50%)
;
1.3.1 固定寬高
固定寬高下,同垂直居中方法一樣,也是絕對定位50%然後通過margin負值拉回去
此為還有一種方法也可以實現已知寬高時候的居中.parent
.child
1.3.2 不固定寬高// 此處如果是不定寬高的話就會child鋪滿整個父元素
.child
flex的出現解決了傳統居中方式難以實現的麻煩,僅需要幾行**就可以實現居中,flex布局不僅能用於居中,在其他布局當中也相當的有效。想要啟動flex只要在父元素設定display: flex,內聯元素的話則是display: inline-flex.// 同樣是替換margin負值
transform
:translate
(-50%, -50%)
;
2.1 水平居中
2.2 垂直居中.parent
2.3 水平垂直居中.parent
此外,如果想要實現豎著排列flex實現也很容易,僅需要換一下主軸方向,多新增一行就行了。.parent
.parent
詳解 CSS 居中布局技巧
方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動,絕對定位,內聯元素,均可水平居中。居中的元素為常規文件流中的內聯元素 display inline 常見的內聯元素有 span,a,img,input,label 等等 pare...
css居中方法詳解
第一種居中方式 使用margin auto 這應該是使用最多的居中方式了,但也有著侷限性,居中的元素需要設定寬度,而且是塊元素才行,並且只能實現水平居中,這個方法的原理是讓瀏覽器自動去計算左右邊距從而實現居中 big small第二種居中方式 使用text align center實現居中,這種居中...
CSS中的居中
我們在實際工作中常會遇到需要設定水平居中的場景,比如為了美觀,文章的標題一般都是水平居中顯示的。這裡我們又得分兩種情況 行內元素 還是 塊狀元素 塊狀元素又分為定寬塊狀元素,以及不定寬塊狀元素 1 行內元素居中 如果被設定的元素為文字 等行內元素時 水平居中就是通過給父元素設定 text align...