博客

方法 1

父元素设置

display: flex;

然后通过

justify-content: center;

进行主轴居中，

align-items: center;

进行侧轴居中。

方法 2

父元素设置相对定位，子元素设置绝对定位

.inner {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

注意点：这儿的 margin 往往不要用百分比，因为 margin 使用百分比是相对于其父盒子的宽度的，

CSS 百分比都是相对于谁

。

方法 3

上面的方案，margin 进行位移的缺点是：需要明确知道自身元素的宽高。

有时候在不知道盒子自身宽高的情况下推荐使用

transform: translate(-50%, -50%)

进行位移，因为 translate 的百分比是相对于盒子自身的，这正是我们期望的。