CSS 水平垂直居中 div 的方式

[myLightLin]

作为前端，CSS 布局也是需要重点掌握的一个知识点，日常开发中有关布局用的最多还是 flex。今天就聊聊 CSS 水平居中一个元素的各种方式。
假设现在有如下 html 结构：

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

flex

使用 justify-content 和 align-items 两个属性：

#outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

或者这样：

#outer {
  display: flex;
}
#inner {
  margin: auto;
}

grid

使用 justify-items 和 align-items 两个属性：

#outer {
  display: grid;
  place-items: center;  /* 比较新的属性 */
 
  /* 如果 place-items 不支持，可以用这两个 */
  justify-items: center;
  align-items: center;
}

或者这样：

#outer {
  display: grid;
}
#inner {
  margin: auto;
}

absolute + transform

通常用于不知道元素宽高的情况：

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

absolute + margin

这种情况需要知道子元素的宽高，假设 inner 元素的宽高都是 100px

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  magin-left: -50px;
  margin-top: -50px;
}

absolute + calc

这种情况需要知道子元素的宽高，假设 inner 元素的宽高都是 100px

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

absolute + margin auto

这种情况下需要先固定子元素的宽高，否则四个方向的值都设置为 0，宽度会被设置成 100%

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}