盒子垂直水平居中有哪些方法？

Mr.Liu小于 1 分钟

盒子垂直水平居中有哪些方法？

方式一

给盒子position(破热行)一个定位，然后left给50%，top给50%，然后使用translate(传死累特)给-50%

.app{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left:50%;
    top:50%;
    translate: -50% -50%;
}

方式二

给盒子和父级标签添加flex(服莱克死)操作 display 滴十普累 align-item 鹅来银-埃碳门丝 jstify-content 假丝滴坏-康腾特 center 深腾儿

<html lang="en">
    <head>
        <style>
            .bodys{
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .app{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body class="bodys">
        <div class="app"></div>
    </body>
</html>

方式三

给盒子position(破热行)一个定位，然后left给50%，top给50%，然后使用margin-top:calc(50%-给定盒子的一半高)，同理margin-left给一半宽 calc 看额c

<html lang="en">
    <head>
        <style>
            .bodys{
                width: 100vw;
                height: 100vh;
            }
            .app{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                left:calc(50% - 50px);
                top:calc(50% - 50px);
            }
        </style>
    </head>
    <body class="bodys">
        <div class="app"></div>
    </body>
</html>