参考资料

1. Flex布局与Grid布局的对比？
2. CSS3 阴影
3. 目标伪类选择器详细说明以及案例
4. css怎么使div居中
5. CSS格式化/压缩有哪些
6. 伪类选择器详细说明以及案例
7. css div居中代码
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%);
}