JS每日一題: 元素水平垂直居中的方式有哪些?

20190119問:

元素水平垂直居中的方式有哪些?前端

  • absolute加margin方案
  • fixed 加 margin 方案
  • display:table 方案
  • 行內元素line-height方案
  • flex 彈性佈局方案
  • transform 未知元素寬高解決方案
absolute加margin方案
div{
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%:
        margin-top: -50px;
        margin-left: -50px;
    }
複製代碼
fixed 加 margin 方案
div{
        position: fixed;
        width: 100px;
        height: 100px;
        top: 0;
        right:0;
        left: 0;
        bottom: 0;
        margin: auto;
    }
複製代碼
display:table 方案
div{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 100px;
        height: 100px;
    }
複製代碼
行內元素line-height方案
div{
        text-align: center;
        line-height: 100px;
    }
複製代碼
flex 彈性佈局方案
div{
        display: flex;
        align-items: center;
        justify-content:center
    }
複製代碼
transform 未知元素寬高解決方案
div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
複製代碼

往期

JS每日一題: 前端的緩存有哪些?都適用什麼場景?區別是什麼?
JS每日一題: Call,Apply,Bind的使用與區別,如何實現一個bind?
JS每日一題: 說說你對前端模塊化的理解
JS每日一題: web安全攻擊手段有哪些?以及如何防範web

關於JS每日一題

JS每日一題能夠當作是一個語音答題社區
天天利用碎片時間採用60秒內的語音形式來完成當天的考題
羣主在第二天0點推送當天的參考答案緩存

  • 注 毫不僅限於完成當天任務,更可能是查漏補缺,學習羣內其它同窗優秀的答題思路

掃描下方二維碼便可加入答題

相關文章
相關標籤/搜索