css设置div浮动居中

CSS可以使用多种方法让`<div>`元素浮动并居中。这里列举几种常见的方法：

1. **Flexbox布局**：对于现代浏览器支持的情况，可以使用`display: flex; justify-content: center; align-items: center;`。将包含`div`的容器设置为flex容器，然后水平和垂直居中就很简单了。

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

2. **Grid布局**：类似于Flexbox，如果可用，可以使用CSS Grid。将`div`放在一个网格项中，并设置`align-content`和`justify-content`属性。

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

3. **传统的`position`和`left/top`、`right/bottom`配合**：如果没有以上布局支持，可以给`div`设置`position: absolute`或`relative`，然后设置`left: 50%`, `top: 50%`, 然后负值将其向左上角移动自身宽度的一半和高度的一半，实现垂直和水平居中。

.parent {
  position: relative;
}

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