盒子的垂直水平居中的几种方式

准备工作

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

一个盒子，垂直水平居中

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

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

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

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

那么现在开始吧！

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

html 代码

1
2
3

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

css 代码

.box{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  width: 200px;
  background-color: aqua;
  height: 200px;
}

效果图

弹性盒模型

方式二（绝对定位）

html 代码

1
2
3

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

css 代码

.container {
  width: 200px;
  background-color: red;
  height: 200px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

效果图

绝对定位

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

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

html 代码

1
2
3

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

css代码

body {
  position: relative;
  height: 100vh;
}

.container {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: blueviolet;
}

效果图

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

html 代码

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

css 代码

.container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 50vh;
  background-color: blanchedalmond;
  transform: translate(0, -50%)
}

效果图