准备工作

首先，在做之前，咱们先来分析一下我们要做的是什么？

一个盒子，垂直 水平 居中

首先 有居中 就必定会被一个父容器（盒子）包裹。

其次 要居中的盒子不会超出父容器大小（否则做居中意义就不大了）

然后 要居中的盒子的宽高可以分为两类 1. 具有固定的宽高。 2. 没有固定的宽高

​ 根据盒子的类型也可分为两类 1.行内快元素inline-block 2. 块级元素block

那么 现在开始吧！

方式一 (弹性盒模型的方式)

html 代码

1
<div class="box">
2
  <div class="container"></div>
3
</div>

css 代码

1
.box{
2
  height: 100vh;
3
  display: flex;
4
  justify-content: center;
5
  align-items: center;
6
}
7
.container{
8
  width: 200px;
9
  background-color: aqua;
10
  height: 200px;
11
}

效果图

弹性盒模型

方式二 （绝对定位）

html 代码

1
<div class="box">
2
  <div class="container"></div>
3
</div>

css 代码

1
.container {
2
  width: 200px;
3
  background-color: red;
4
  height: 200px;
5
  margin: auto;
6
  position: absolute;
7
  top: 0;
8
  bottom: 0;
9
  left: 0;
10
  right: 0;
11
}

效果图

绝对定位

注意：由于是使用绝对定位。元素脱离文档流，相对于具有除去static定位以外的其他父级定位去定位的，如果没有父级定位，根据body来定位

方式三（位移transform的translate属性 + 定位）

html 代码

1
<div class="box">
2
  <div class="container"></div>
3
</div>

css代码

1
body {
2
  position: relative;
3
  height: 100vh;
4
}
5
6
.container {
7
  width: 200px;
8
  height: 200px;
9
  position: absolute;
10
  top: 50%;
11
  left: 50%;
12
  transform: translate(-50%, -50%);
13
  background-color: blueviolet;
14
}

效果图

位移

方式四（位移+外边距 + vh）

html 代码

1
<div class="container"></div>

css 代码

1
.container {
2
  width: 200px;
3
  height: 200px;
4
  margin: 0 auto;
5
  margin-top: 50vh;
6
  background-color: blanchedalmond;
7
  transform: translate(0, -50%)
8
}

效果图

垂直

注意：部分文章可能会在不就的将来更新

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！