今天主要談一談css中的各種居中的辦法。
首先是水平居中,最簡單的辦法當然就是
margin:0 auto;
也就是將margin-left和margin-right屬性設定為auto,從而達到水平居中的效果。
那麼其他的辦法呢?容我一一道來:
line-height
首先介紹文字的水平居中方法:劉放
利用line-height設為height的一樣即可:
.wrap
padding填充
利用padding和background-clip配合實現div的水平垂直居中:
通過backgroun-clip設定為content-box,將背景裁剪到內容區外沿,再利用padding設為外div減去內div的差的一半,來實現:
parent
.children
.children
absolute定位
利用position:absolute搭配top,left 50%,再將margin設為負值也可以對div進行水平垂直居中,首先還是需要定義父子div:
.parent
.children
其中的margin中的值為該div寬度的一半,最後效果圖:
text-align居中
眾所周知,text-align可以使得乙個div中的內容水平居中。但是如果是要將該div中的子div居中呢?可以將子div的display設為inline-block。
.parent
.children
居中
有一種特殊的方式,利用了乙個進行佔位,以讓父容器獲得高寬,從而讓進行-50%偏移的能有乙個參照容器作百分比計算。優點是可以不知道的大小,隨便放張尺寸不超過父容器的上去都能做到居中。另外,相容性好,ie6都是能順利相容的。**如下:
.parent
p
.hidden-img
.show-img
transform居中
上面講到的div居中的例子中,div的寬度都是固定的,然而實際專案中,有可能遇到不定寬的div,特別是響應式或者移動端的設計中,更加常見。所以下面介紹一種不需要定寬的div水平垂直居中方法。
先上**:
我是水平垂直居中噢!
.parent
.children
.children-inline
首先我們利用float,將需要居中的div的父div也就是children的寬度收縮,然後left:50%,將children的左邊與水平中線對齊。這個時候,還沒有真正居中,我們需要將children-inner左移動-50%,這樣就水平居中了。
再來說說垂直方向,先將children的top設為50%,然後其上邊和垂直中線對齊了,同樣,我們需要將children-inner上移動-50%。但是這個50%是計算不出來的,所以我們用到了transform : translate3d(0, -50%, 0);
這個方法非常好用噢。
css居中方式
水平居中的text align center 和 margin 0 auto 前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。垂直居中的line height 作用在父元素上,當他的值等於父元素的height值時,內部的文字就會自動的垂直居中 萬能p...
CSS的居中方式
剛學習css的時候嘗試過幾種居中的方法,這些方法不需要借助js手段,所寫的方法有乙個原則,就是在不需要直接人為的設定好寬高計算後再實現居中,還有諸如table布局啊 行高設定 margin auto之類的我就不寫了。以下幾種方法針對不同的瀏覽器,經過測試,從ie8及以下到ie9 safari都有不同...
CSS中的多種居中方式
css居中一直是我想要整理記錄的,拖了很久,今天就順便整理一下 是我目前使用最多的一種方式,flex布局也是現在最方便的一種布局,廣泛用於pc端和移動端 containergrid布局是一種比flex更加強大的布局,但是目前兼用性並不好,我使用的並不多,但也能實現居中 container傳統中比較新...