摘要:讓其上下左右居中。行內塊沒有固定高度時也會上下居中顯示。步驟步驟子設定為行內塊元素父設置行高使子上下居中父設置文本居中使子左右居中。
例如 一個父div(w:100%;h:400px)中有一個子div(w:100px;100px;)。讓其上下左右居中。
利用表格單元格的居中屬性。
注:
width:100%;
當父div的行高等于自身高度時,內部的行內元素會上下居中顯示。行內塊沒有固定高度時也會上下居中顯示。通過文本居中屬性text-align:center
,可以使內部行內元素或行內塊元素左右居中顯示。
注: 行高如果設置為當前父div的高度(400px)的話,有固定高度的子div并不會居中顯示的,問題出在瀏覽器默認將其當做文本居中的,即把它當做了一段文本(chrome默認font-size:16px;hight:21px)進行居中,沒把它當做高度100px進行居中。所以需要對父div的line-height
進行調整。以font-size:0
(對應的字體高度為0)為例子,則需要line-height增加一個子div的高度(400px + 100px;)。
利用定位屬性(top、left、right、bottom)百分比的模式。若為100%,則代表偏移的長度為父div的高度(寬度)的100%。
top:50%;margin-top:-h/2;
或是 bottom:50%;margin-bottom:-h/2;
;left:50%;margin-left:-w/2
或是 right:50%;margin-right:-w/2
;
定位屬性top和bottom(或是left和right)值分別設置為0,但子div有固定高度(寬度),并不能達到上下(左右)間距為0,此時給子div設置margin:auto會使它居中顯示。
top:0;bottom:0;margin-top:auto;margin-bottom:auto
left:0;right:0;margin-left:auto;margin-right:auto
彈性盒子中只要給彈性子元素設置 margin: auto; 可以使得彈性子元素上下左右居中。
flex兼容性,以及存在的已知問題
利用定位屬性(top、left、right、bottom)百分比的模式。若為100%,則代表偏移的長度為父div的高度(寬度)的100%。
top:50%;margin-top:-h/2;
或是 bottom:-50%;margin-top:-h/2;
;left:50%;margin-left:-w/2
或是 right:-50%;margin-left:-w/2
;
注:
方法二和方法三兼容性要比其它好些。最簡單的是彈性盒子。
margin負值可以用2D轉換代替。優(yōu)點是不用計算子div的寬高。
margin-top: -h/2
=> transform: translateY(-50%)
margin-bottom: -h/2
=> transform: translateY(50%)
margin-left: -h/2
=> transform: translateX(-50%)
margin-right: -h/2
=> transform: translateX(50%)
Can I use
css-vertical-center-solution
CSS實現(xiàn)垂直居中的5種方法--前端觀察
盼先生
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.hztianpu.com/yun/2316.html
摘要:下面的會造成這種樣子的垂直居中因此,如果有一個方塊變成了高度,那么其他的方塊就會真正的垂直居中。使用使用或的屬性,輕輕松松就可以做到垂直居中的效果。 我們在編輯一個版面,通常都會用到水平居中和垂直居中來設計,而水平居中很好處理,不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題,但一直以來最麻煩對齊問題,都是垂直居中這個討...
摘要:下面的會造成這種樣子的垂直居中因此,如果有一個方塊變成了高度,那么其他的方塊就會真正的垂直居中。使用使用或的屬性,輕輕松松就可以做到垂直居中的效果。 我們在編輯一個版面,通常都會用到水平居中和垂直居中來設計,而水平居中很好處理,不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題,但一直以來最麻煩對齊問題,都是垂直居中這個討...
摘要:寬度與高度如果你的代碼里經常出現(xiàn)和屬性說明你對寬度與高度理解的不夠深文檔流翻譯很爛應該為普通流或者常規(guī)流的高度字體高度與行高字和字之間是通過基線對齊的行高與默認行高是字體設計室寫進去的不同字體行高不一樣跟字體設計有關系字體的建議行高寫在了 CSS2:寬度與高度 如果你的CSS代碼里經常出現(xiàn)height和width屬性,說明你對寬度與高度理解的不夠深 1.文檔流(Normal Flow)...
摘要:之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習,再次謝謝張大大阮大大的各種分享。 對于元素的水平居中,我根據(jù)我自己之前的一些學習來進行一些總結,如果有不對的地方,歡迎指正~ 一、讓大小不固定的元素垂直居中 因為:表格的單元格的特別屬性:垂直居中等; `div.parent { display: table-cell; vertical-align...
摘要:之前看了張大大的博客總結一下我對和的一些認知。站在巨人的肩膀上學習,再次謝謝張大大阮大大的各種分享。 對于元素的水平居中,我根據(jù)我自己之前的一些學習來進行一些總結,如果有不對的地方,歡迎指正~ 一、讓大小不固定的元素垂直居中 因為:表格的單元格的特別屬性:垂直居中等; `div.parent { display: table-cell; vertical-align...
閱讀 3299·2021-10-13 09:40
閱讀 3864·2019-08-30 15:54
閱讀 1388·2019-08-30 13:20
閱讀 3088·2019-08-30 11:26
閱讀 540·2019-08-29 11:33
閱讀 1152·2019-08-26 14:00
閱讀 2438·2019-08-26 13:58
閱讀 3436·2019-08-26 10:39