[css]盒子水平垂直居中的6种方法

原创已于 2022-03-09 14:57:02 修改 · 1.4w 阅读 ·

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

嘻咦啊写

关注

标签

#css #前端 #css3

分类前端开发

于 2022-02-17 21:57:51 首次发布

本文总结了6种使盒子在前端开发中实现水平垂直居中的方法，包括定位法、margin auto、display: table-cell、flex布局、计算距离法以及transform属性的应用。这些方法覆盖了不同场景的需求，对于前端开发者来说是必备知识点。

让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。

盒子的设定

父盒子：width: 400px; height: 500px;
子盒子：width: 100px; height: 100px;
（当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定）

预期结果

在这里插入图片描述

方法

1.定位法

利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位完成盒子水平垂直居中</title>
  <style>
    .box{
      position: relative;
      width: 400px;
      height: 500px;
      background-color: skyblue;
    }
    .box1{
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>
</html>

2.margin：auto；

其实也是定位的方法，只是定位时使用了margin
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>margin完成盒子水平垂直居中</title>
  <style>
    .box {
      position: relative;
      width: 400px;
      height: 500px;
      background-color: skyblue;
    }

    .box1 {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

</html>

3.利用 display:table-cell

把父盒子转化为单元格，子盒子转化为行内块元素，再给父盒子设置文字居中
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>table-cell完成盒子水平垂直居中</title>
  <style>
    .box {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 400px;
      height: 500px;
      background-color: skyblue;
    }

    .box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

</html>

4.flex布局。display：flex；

比较轻松的方式，在实际应用中用的较多
代码如下;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex完成盒子水平垂直居中</title>
  <style>
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 400px;
      height: 500px;
      background-color: skyblue;
    }

    .box1 {
     
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

</html>

5.计算父盒子和子盒子之间的距离

比较麻烦，不实用。而且用这个方法必须给盒子添加边框。
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算距离完成盒子水平垂直居中</title>
  <style>
    .box {
     
      width: 400px;
      height: 500px;
      background-color: skyblue;
      border: 1px solid black;
    }

    .box1 {
     
      width: 100px;
      height: 100px;
      background-color: orange;
      border: 1px solid black;
      margin-top: 200px;
      margin-left: 150px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

</html>

6.利用 transform

其实也是定位法，跟第一个方法原理一致
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算距离完成盒子水平垂直居中</title>
  <style>
   .box{
      position: relative;
      width: 400px;
      height: 500px;
      background-color: skyblue;
    }
    .box1{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

</html>