盒子垂直水平居中

要设置内部盒子在外部盒子内垂直水平居中，可以有以下几种做法：

一、外部盒子与内部盒子都已知大小。

假设外部盒子为红色，大小为10em*10em；内部盒子为黄色，大小为3em*3em。在调整位置之前，盒子情况如下： 

初始盒子

由于知道两个盒子的大小，只要设置黄盒子的位置即可，首先设置黄盒子的position为absolute，再将黄盒子向右下方偏移红盒子大小的一半，即向右偏移5em，向下偏移5em。此时盒子情况如下：

右下偏移之后

 此时的黄盒还不在正中间，调用transform(-1.5em,-1.5em）将黄盒基于自身位置向左上偏移自身盒子大小的一半，效果如下：

最终效果​​

这样子黄盒子就在红盒子的正中间，代码如下：

.out {
  width: 10em;
  height: 10em;
  background-color: red;
}
.in {
  position: absolute;
  top: 5em;
  left: 5em;
  transform: translate(-1.5em, -1.5em);
  width: 3em;
  height: 3em;
  background-color: yellow;
}

 二、外部盒子大小未知，内部盒子大小已知。

当外部盒子大小未知时，由于不知道偏移的具体数值，只要将top和left的值变为50%即可，百分比是由父级元素的大小决定的，而父级元素的position需要设置成relative，代码如下：

.out {
  position: relative;
  width: 10em;
  height: 10em;
  background-color: red;
}
.in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-1.5em, -1.5em);
  width: 3em;
  height: 3em;
  background-color: yellow;
}

效果如下：

垂直水平居中

三、内外盒子大小都未知。

当两个盒子的大小都未知时，重新设置transform：translate(-50%,-50%），这段代码使得黄盒子基于自身位置向左上方偏移自身宽高的一半。代码如下：

.out {
  position: relative;
  width: 10em;
  height: 10em;
  background-color: red;
}
.in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 3em;
  height: 3em;
  background-color: yellow;
}

效果如下：

垂直水平居中

四、设置外部盒子为flex布局。

将红盒子设置成flex布局页可以解决垂直水平居中的问题，只要将红盒子的display设置成flex，之后设置justify-content为center，设置align-items为center。flex具有主轴和交叉轴，内部的项目在主轴上依次排列，justify-content定义了内部的项目在主轴上应该怎样排列，当值为center代表项目在主轴上居中；align-items定义了内部的项目在交叉轴上的对齐方式，值为center时代表居中对齐。实现代码如下：

.out {
  width: 10em;
  height: 10em;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.in {
  width: 3em;
  height: 3em;
  background-color: yellow;
}

效果如下：

flex布局垂直水平居中