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

原创已于 2022-02-20 19:44:03 修改 · 2.3k 阅读

27 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML+CSS+JS

前端面试

于 2020-06-28 09:04:19 首次发布

本文介绍了多种使用CSS实现盒子在窗口中水平垂直居中的方法，包括绝对定位加margin、transform:translate()、flex布局、grid布局等，适用于不同场景的需求。

文章目录

一、绝对定位 + 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 网格布局教程

七、新加的———— Grid布局之空间居中布局

不管容器的大小，项目总是占据中心点。 详细信息，请参考：只要一行代码，实现五种 CSS 经典布局

 <div class="father">
      <div class="item"></div>
 </div>
 
 .father {
  display: grid;
  place-items: center;/*核心代码*/
  height: 600px;
  border: 1px solid red;
} 
.item {
  background: lightpink;
  height: 100px;
  width: 100px;
}