不固定宽度和高度的情况下CSS调整div居中的方法总结

针对“不固定宽度和高度的情况下CSS调整div居中”的问题，我们可以采用以下两种方法：

方法一：使用Flex布局

Flex布局是一个比较新的CSS属性，它可以用来解决很多布局问题，包括居中问题。

实现居中的方法如下所示：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

上述代码中，container为包含div元素的容器，设置了display: flex后，容器内的子元素可以快速使用flex布局，并且justify-content属性可以让子元素水平居中，align-items属性可以让子元素垂直居中。

接下来看一个示例：

<div class="container">
  <div>Hello, World!</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度，使子元素在页面中央 */
}

.container div {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

在上述示例中，div元素的宽高并没有固定，但使用Flex布局让其在容器中居中，使其在页面中央展示。

方法二：使用绝对定位和transform

还有一种比较常见的方法是使用绝对定位和transform属性来实现居中。

具体做法如下所示：

.container {
  position: relative; /* 设置容器为相对定位 */
}

.container div {
  position: absolute; /* 设置子元素为绝对定位 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 使用transform属性调整子元素位置 */
}

上述代码中，通过position属性让容器成为相对定位元素，在子元素上采用绝对定位，并通过left和top属性让子元素固定在容器的中央位置，transform属性中的translate值可以让子元素正确地对齐。

下面是一个示例：

<div class="container">
  <div>Hello, World!</div>
</div>

.container {
  position: relative;
  height: 100vh;
}

.container div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: #fff;
  padding: 20px;
}

在上面的示例中，通过transform属性让子元素在容器中央，实现“不固定宽度和高度的情况下CSS调整div居中”的需求。