居中布局

水平居中

--行內(nèi)元素
text-align:center
--塊元素
margin: 0 auto
flex + justify-content:center
absolute + transform

垂直居中

line-height:容器的高度(height);
flex + align-items:center
absolute + transform

垂直水平居中

已知元素的寬高的居中布局

定位居中布局

選擇器{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
}

盒模型居中布局

選擇器{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;(元素width的一半)
            margin-top: -50px;(元素height的一半)
            width:100px;
            height:100px;
}

圖片的垂直水平居中(利用基線)

 <style>
        #wrap{
            width: 300px;
            height: 300px;
            border: 1px solid;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            text-align: center;
        }

        #wrap img{
            width: 200px;
            height: 200px;
            vertical-align: middle;
        }
        #wrap:after{
            content: "";
            display: inline-block;
            height: 100%;
            width: 0px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="wrap">
    <img src="images/1-middleRani.jpg">
</div>

未知元素的寬高的居中布局

定位+2D平移

div{
          border: 1px solid;
           /*left + top + 盒模型相關(guān) = 300*/
              /*0 + 0 + auto + 0 + 1*2 + auto = 300*/
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
}

canvas中的垂直水平居中

canvas文本垂直水平居中

<body>
    <canvas width="300" height="300"></canvas>

    <script>
        var canvas = document.querySelector("canvas");
        canvas.style.background = "#ccc";
        var ctx = canvas.getContext("2d");

        ctx.font = "50px times";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText('hello',canvas.width/2,canvas.height/2);
    </script>

canvas圖形垂直水平居中

<body>
    <canvas width="300" height="300"></canvas>
    <script>
        var canvas = document.querySelector("canvas");
        canvas.style.background = "#ccc";
        var ctx = canvas.getContext("2d");
        // ctx.fillRect(0,0,100,100);
        //圖形居中
        ctx.fillRect(canvas.width/2-50,canvas.height/2-50,100,100);
    </script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容