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

資訊專欄INFORMATION COLUMN

關于CSS居中問題的一些總結

ISherry / 1089人閱讀

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

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

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

第二
使用table+margin
將子元素設置成塊級表格顯示類似（

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


        父
    
子




 display: table;
 margin: 0 auto;

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

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

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

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

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

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

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

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

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

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

相關文章

  • 關于CSS居中問題的一些總結

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

    Riddler 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • CSS及布局

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

    jaysun 評論0 收藏0

  • 2017年五月前端面試題目的總結

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

    warkiz 評論0 收藏0

發(fā)表評論

0條評論

ISherry

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
    
<