div居中样式

参考资料

1. CSS有哪些预处理器？
2. 背景属性详细说明以及案例
3. 目标伪类选择器详细说明以及案例
4. 动画属性详细说明以及案例
5. 有没有推荐的 CSS 过渡动画库？
6. 如何避免Flex容器高度塌陷？
7. Flex布局在动画制作中的应用？
8. 伪元素选择器详细说明以及案例

1. 水平居中：

div {
  margin: 0 auto;
  width: 200px;
}

2. Flexbox方法：

.container {
  display: flex;
  justify-content: center;
}

3. Grid方法：

.container {
  display: grid;
  place-items: center;
}

4. 绝对定位方法：

div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

5. 文本居中（内联元素）：

div {
  text-align: center;
}

6. 垂直水平居中（Flexbox）：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

7. 垂直水平居中（Grid）：

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

8. 垂直水平居中（绝对定位）：

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}