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

Riddler 發布于2019-08-30 14:14 / 3267人閱讀

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

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

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

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

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


        父
    子


 display: table;
 margin: 0 auto;

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

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

第四
使用flex+margin
通過父級元素flex布局將子框轉換為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;

GPU云服務器云服務器 vps日常維護中的一些要點總結關于javascript的問題關于php的問題關于系統錯誤的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115874.html

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

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

ISherry 2019-08-01 18:44 評論0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS及布局

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

jaysun 2019-08-29 14:04 評論0 收藏0
2017年五月前端面試題目的總結

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

warkiz 2019-08-20 17:30 評論0 收藏0