資訊專欄INFORMATION COLUMN
摘要：前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來(lái)說(shuō)不怎么看得出來(lái)，除非你用調(diào)用來(lái)查看。隨著的泛濫，很快老舊的瀏覽器也就成了古董，所以這個(gè)居中方法也挺不錯(cuò)，就是對(duì)于兼容性很高的項(xiàng)目，最好不要使用。
前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來(lái)說(shuō)不怎么看得出來(lái)，除非你用javascript調(diào)用
offsetTop來(lái)查看。不然沒有強(qiáng)迫癥的比較難看出來(lái)。但是兼容性很好，尤其是table-cell的從IE6即可使用
1.使用table-cell處理圖片間的關(guān)系
父元素使用display:table-cell; vertical:middle 子元素使用display:inline-block; vertical:middle;
即可簡(jiǎn)單使圖片居中
2.使用line-height處理
父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//這里的line-heiht要跟父元素大小一樣； 子元素使用vertical-align:middle;
第三種稱為絕對(duì)居中，不居中來(lái)找我，就是兼容性有點(diǎn)差，起碼要IE9 才能兼容，一般的webkit也都沒問題就是。隨著ES6的泛濫，很快老舊的瀏覽器也就成了古董，所以這個(gè)居中方法也挺不錯(cuò)，就是對(duì)于兼容性很高的項(xiàng)目，最好不要使用。但是有問題的是，必須指定height，因?yàn)轱@然，這邊計(jì)算的是下移50%的當(dāng)前高度的Y軸。而前面兩種方法不需要
3.使用translateY來(lái)垂直居中
父元素使用position:relative;height:400px; 子元素position:relative;transfrom:translateY(-50%);height:100px;top:50%;
以下是全部代碼，自己找張demo.jpg做實(shí)驗(yàn)就可以
test
a
-->
部分idea 參考自以下文章
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111302.html
摘要：之前看了張大大的博客總結(jié)一下我對(duì)和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。 對(duì)于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來(lái)進(jìn)行一些總結(jié)，如果有不對(duì)的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因?yàn)椋罕砀竦膯卧竦奶貏e屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...
摘要：之前看了張大大的博客總結(jié)一下我對(duì)和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。 對(duì)于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來(lái)進(jìn)行一些總結(jié)，如果有不對(duì)的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因?yàn)椋罕砀竦膯卧竦奶貏e屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...
摘要：前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來(lái)說(shuō)不怎么看得出來(lái)，除非你用調(diào)用來(lái)查看。隨著的泛濫，很快老舊的瀏覽器也就成了古董，所以這個(gè)居中方法也挺不錯(cuò)，就是對(duì)于兼容性很高的項(xiàng)目，最好不要使用。 前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來(lái)說(shuō)不怎么看得出來(lái)，除非你用javascript調(diào)用offsetTop來(lái)查看。不然沒有強(qiáng)迫癥的比較難看出來(lái)。但是兼容性...
摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
閱讀 1813·2021-10-20 13:49
閱讀 1356·2019-08-30 15:52
閱讀 2862·2019-08-29 16:37
閱讀 1033·2019-08-29 10:55
閱讀 3063·2019-08-26 12:14
閱讀 1648·2019-08-23 17:06
閱讀 3235·2019-08-23 16:59
閱讀 2542·2019-08-23 15:42
