html+css使得盒子水平垂直居中（常用的三种方法）

最新推荐文章于 2024-07-24 20:42:50 发布

广州湾兔老大

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量1.8k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/IT_Dilraba_bin/article/details/129235565

版权

背景

常常我们会遇到让盒子在页面中水平垂直居中，例如在登录页面的时候，我们会让登录的盒子水平垂直居中在页面的中心。这个时候我们会有很多种方法去使得盒子居中。下面是我常用的三种方法：

定位+margin:auto

// css
.aaa {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid #000;
}

.bbb {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #000;
  margin: auto;
  text-align: center;
  line-height: 100px;
}

// html
<div class="aaa">
  <div class="bbb">1</div>
</div>

flex布局法

// css
.ccc {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
}

.ddd {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
  line-height: 100px;
}

// html
<div class="ccc">
  <div class="ddd">2</div>
</div>

定位移动法

// css
.eee {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  position: relative;
  margin-left: 15px;
}

.fff {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
  line-height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// html
<div class="eee">
  <div class="fff">3</div>
</div>

整体页面效果

<!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 {
      display: flex;
    }

    .aaa {
      width: 200px;
      height: 200px;
      position: relative;
      border: 1px solid #000;
    }

    .bbb {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border: 1px solid #000;
      margin: auto;
      text-align: center;
      line-height: 100px;
    }

    .ccc {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 15px;
    }

    .ddd {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      text-align: center;
      line-height: 100px;
    }
    .eee {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      position: relative;
      margin-left: 15px;
    }

    .fff {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      text-align: center;
      line-height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="aaa">
      <div class="bbb">1</div>
    </div>
    <div class="ccc">
      <div class="ddd">2</div>
    </div>
    <div class="eee">
      <div class="fff">3</div>
    </div>
  </div>
</body>

</html>

广州湾兔老大

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
html+css使得盒子水平垂直居中（常用的三种方法）

常常我们会遇到让盒子在页面中水平垂直居中，例如在登录页面的时候，我们会让登录的盒子水平垂直居中在页面的中心。这个时候我们会有很多种方法去使得盒子居中。下面是我常用的三种方法：
复制链接

扫一扫