div居中样式

参考资料

1. 背景属性详细说明以及案例
2. 动态伪类选择器详细说明以及案例
3. 伪类选择器详细说明以及案例
4. css中div居中
5. css div阴影效果,
6. CSS定位详细说明以及案例
7. 边框属性详细说明以及案例
8. Flex布局在动画制作中的应用？

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。