参考资料

1. 如何用Flex布局制作响应式布局？
2. 几种常用的 CSS 横向布局方法
3. flex-direction: row/column示例
4. 有没有推荐的 CSS 过渡动画库？
5. 如何避免 CSS 过渡动画卡顿？
6. ui状态伪类选择器详细说明以及案例
7. 如何编写CSS代码？
8. css实现阴影效果

div居中样式

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%);
}