让盒子水平垂直居中的方法小结

下一秒
283 阅读3分钟

一、绝对定位 + margin，让固定宽高的盒子水平垂直居中于窗口

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            .wangyi-loading{
                width: 360px;
                height: 360px;
                margin:auto; 
                position: absolute;
                top:0;
                right:0;
                bottom:0;
                left:0;
                border:5px solid red;
            }
        </style>
    </head>
    <body>
        <div class="wangyi-loading"></div>
    </body>
</html>

在这里插入图片描述

二、 绝对定位+transform:translate() ，让盒子水平垂直居中于窗口

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            .son{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%); /*向左，向上移它的50%*/
                border:5px solid lightcoral;
            }
        </style>
    </head>
    <body>
        <div class="son"> 我是居中的盒子</div>
    </body>
</html>

在这里插入图片描述

三、父级用flex布局 ，让盒子水平垂直居中于窗口

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            .father{
                display: flex; /* 1.设置为弹性盒子 */
                align-items: center; /* 2.让子项盒子纵向 居中排列 */
                justify-content: center; /*  3.让子项盒子横向 居中排列 */
                border:2px solid green;
                height:100vh;
            }
            .son{
                border:5px solid lightcoral; 
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">
                盒子居中
            </div>
        </div>
    </body>
</html>

在这里插入图片描述

四 、父级flex布局 + 子级margin:auto，让盒子水平垂直居中于窗口

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            .father{
                display: flex; /* 1. 父级flex布局  */
                border:2px solid green;
                height:100vh;
            }
            .son{
                border:5px solid lightcoral;
                margin: auto; /* 2. 子级margin：auto auto; */
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">我就是那个居中的盒子</div>
        </div>
    </body>
</html>

在这里插入图片描述

五 、父级display: table-cell + 子级margin:0 auto，让盒子水平垂直居中于窗口

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            .father{
                display: table-cell; /* 1. 指定元素为 表格单元格（table-cell） */
                vertical-align: middle; /* 2. 指定行内元素（inline）或表格单元格（table-cell）元素垂直居中对齐。 */
                border:2px solid green;
                height:100vh;
                width: 100vw;
            }
            .son{
                border:5px solid lightcoral;
                width: 200px; /* 若不设置宽度，会自动撑为100% */
                margin: 0 auto; /* 3. 控制横向居中  */
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">我就是那个居中的盒子</div>
        </div>
    </body>
</html>

在这里插入图片描述

六 、父级网格布局display:grid + 子级grid-area指定项目位置，让盒子水平垂直居中于窗口

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .father {
            display: grid; /* 1. 指定容器采用网格布局*/
            grid-template-rows: 1fr 100px 1fr; /*  2. 定义3行，中间那个100px为所需居中的盒子高度 */
            grid-template-columns: 1fr 100px 1fr; /* 3. 定义3列，中间那个100px为所需居中的盒子宽度 */
            border: 2px solid green;
            height: 100vh;
            width: 100vw;
        }
        .son {
            border: 5px solid lightcoral;
            grid-area: 2/2/3/3;  /* 以网格线为基准，指定项目位置 ，上左下右,第一个2表示横向第二根线条，   grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我就是那个居中的盒子</div>
    </div>
</body>
</html>

在这里插入图片描述
关于网格布局的更多信息，可参考：CSS Grid 网格布局教程

avatar
文章
阅读
粉丝