成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于CSS居中問題的一些總結(jié)

Riddler / 3277人閱讀

摘要：兼容性屬性兼容存在一定問題，高版本需要添加前綴父子第四使用通過父級(jí)元素布局將子框轉(zhuǎn)換為再設(shè)置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結(jié)合兼容性屬性兼容性問題父子第六父相對(duì)子絕對(duì)，上下左右居中兼容性及以上父子

前端頁面開發(fā)中關(guān)于內(nèi)容居中的需求應(yīng)用概率很大，自己搜集一些資料和總結(jié)關(guān)于css里的幾種居中效果實(shí)現(xiàn)

第一
常用text-align:center
先將子元素將塊級(jí)元素改為行內(nèi)元素，即display:inline-block
父級(jí)元素設(shè)置text-align:center
兼容性：IE6?,?IE7

第二
使用table+margin
將子元素設(shè)置成塊級(jí)表格顯示類似（

）,在設(shè)置子框居中以達(dá)到水平居中
兼容性：不支持??IE6、IE7


        父
    
子




 display: table;
 margin: 0 auto;

第三
使用absolute+transform
將子元素設(shè)置為絕對(duì)定位，移動(dòng)子框，使子元素左側(cè)距離相對(duì)左側(cè)邊框的距離為相對(duì)子框?qū)挾鹊囊话?，再通過向左移動(dòng)子框一半寬度以達(dá)到水平居中。
兼容性：css3屬性兼容存在一定問題，高版本需要添加前綴

position: relative; /*父*/
position: absolute; /*子*/
left: 50%;
transform:translateX(-50%);

第四
使用flex+margin
通過父級(jí)元素flex布局將子框轉(zhuǎn)換為flex item再設(shè)置子元素水平居中
兼容性：不支持IE6、IE7、IE8

display: flex; /*父*/
margin: 0 auto; /*子*/

第五（水平垂直）
將水平居中absoulte+transform和垂直居中的absoulte+transform相結(jié)合
兼容性：css3屬性兼容性問題

position: relative; /*父*/
position: absolute; /*子*/
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

第六
父相對(duì)子絕對(duì)，上下左右+margin居中
兼容性：IE8及以上

position: relative; /*父*/
----------------------------
position: absolute; /*子*/
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115874.html

相關(guān)文章

  • 關(guān)于CSS居中問題的一些總結(jié)

    摘要：兼容性屬性兼容存在一定問題，高版本需要添加前綴父子第四使用通過父級(jí)元素布局將子框轉(zhuǎn)換為再設(shè)置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結(jié)合兼容性屬性兼容性問題父子第六父相對(duì)子絕對(duì)，上下左右居中兼容性及以上父子 前端頁面開發(fā)中關(guān)于內(nèi)容居中的需求應(yīng)用概率很大，自己搜集一些資料和總結(jié)關(guān)于css里的幾種居中效果實(shí)現(xiàn) 第一常用text-align:center先將子元素將...

    ISherry 評(píng)論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識(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 屬性不...

    xiaolinbang 評(píng)論0 收藏0

  • CSS及布局

    摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...

    jaysun 評(píng)論0 收藏0

  • 2017年五月前端面試題目的總結(jié)

    摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面?，F(xiàn)將我在面試過程遇到的問題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來。 持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對(duì)經(jīng)驗(yàn)和細(xì)節(jié)...

    warkiz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
    <strike id="2cq0o"><input id="2cq0o"></input></strike>
    
<