HTML元素在页面居中的方法

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="fuyun">
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #mainBox {
                width: 100%;
                height: 500px;
                background-color: lightcoral;
                position: relative;
            }

            #box {
                width: 70%;
                height: 60%;
                background-color: aliceblue;
                display: flex;
                position: absolute;
                transform: translate(-50%, -50%);
                top: 50%;
                left: 50%;
                margin: 0 auto 0;
                align-items: center;
            }

            #box>div {
                flex: 1;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="mainBox">
            <div id="box">
                <div>11111</div>
                <div>22222</div>
                <div>33333</div>
            </div>
        </div>
    </body>
</html>

 

 

效果: