資訊專欄INFORMATION COLUMN
這里不討論行內(nèi)元素的居中?。?/em>
盒子垂直居中+水平居中的需求時(shí)經(jīng)常遇到的，看到的較多實(shí)現(xiàn)邏輯是固定content-box的寬度，通過讓margin-left和margin-top等于寬或高的負(fù)一半來實(shí)現(xiàn)，抑或不固定寬度，通過JS調(diào)整margin-left和margin-top的值，這倆種方法原理都一樣。
而我接下來要講的是content不定寬的情況下，CSS的源生實(shí)現(xiàn)。
主要利用td的vertical-align: middle;屬性實(shí)現(xiàn)垂直居中，當(dāng)然你可以用display:table-cell;也可以得到一樣的效果。配合margin: 0 auto;實(shí)現(xiàn)水平居中,支持IE 8+。
效果：https://codepen.io/FreadChen/...
利用flex布局可以實(shí)現(xiàn)更多功能，這里利用了“justify-content”實(shí)現(xiàn)水平居中、“align-items”實(shí)現(xiàn)垂直居中，“flex: 0 0 auto;”讓元素保持原來的寬高。這個(gè)技術(shù)的局限在于支持IE 10+。
了解Flex請(qǐng)戳：http://www.ruanyifeng.com/blo...
看效果請(qǐng)戳：https://codepen.io/FreadChen/...
利用position + transform實(shí)現(xiàn)垂直居中
利用position的絕對(duì)定位absolute（absolute的使用技巧自行了解）將left和top都設(shè)為50%；再利用transform: translate(-50%,-50%);來補(bǔ)償元素寬高所帶來的位置影響。該技巧支持IE9+。
看效果請(qǐng)戳：https://codepen.io/FreadChen/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/52259.html
這里不討論行內(nèi)元素的居中！！ 盒子垂直居中+水平居中的需求時(shí)經(jīng)常遇到的，看到的較多實(shí)現(xiàn)邏輯是固定content-box的寬度，通過讓margin-left和margin-top等于寬或高的負(fù)一半來實(shí)現(xiàn)，抑或不固定寬度，通過JS調(diào)整margin-left和margin-top的值，這倆種方法原理都一樣。 而我接下來要講的是content不定寬的情況下，CSS的源生實(shí)現(xiàn)。 利用table實(shí)現(xiàn)垂直水平...
摘要：高度模型淺識(shí)為的簡寫，簡稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
閱讀 1148·2021-11-24 10:27
閱讀 3421·2021-11-18 10:02
閱讀 2469·2021-11-16 11:45
閱讀 3239·2021-11-15 18:10
閱讀 923·2021-09-22 15:23
閱讀 1613·2019-08-30 15:53
閱讀 3103·2019-08-30 13:20
閱讀 1756·2019-08-30 12:53
