页面中的 CSS Center Div

CSS可以用来居中一个div，下面是具体的实现方法。

水平居中

1. 设定父级元素的text-align属性为center
2. 将需要居中的元素设为display: inline-block或者display: inline

代码片段：

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

垂直居中

（1）绝对定位 + 负边距

1. 父级元素设为relative定位
2. 将需要居中的元素设为absolute定位
3. 调整top和left属性值，使元素正好居中于父级元素中间

代码片段：

.parent {
  position: relative;
}

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

（2）Flex布局

1. 父级元素设为display: flex
2. 子元素设为margin: auto

代码片段：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  margin: auto;
}

（3）表格布局

1. 父级元素设为display: table
2. 子元素设为display: table-cell和vertical-align: middle

代码片段：

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

水平垂直居中

（1）绝对定位 + 负边距 + Flex

1. 父级元素设为relative定位和display: flex
2. 中间层元素设为absolute定位
3. 调整top和left属性值，使元素正好居中于父级元素中间
4. 中间层元素设为display: flex和justify-content: center和align-items: center

代码片段：

.parent {
  position: relative;
  display: flex;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

（2）Flex布局 + margin

1. 父级元素设为display: flex和justify-content: center和align-items: center
2. 子元素设为margin: auto

代码片段：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  margin: auto;
}

以上就是CSS居中div的方法，可以根据实际情况选择最佳的方法。