宽度高度不固定的div 如何水平居中以及垂直居中

在网页设计中，我们经常需要将宽度高度不固定的 div 元素水平居中以及垂直居中，以使其更好地适应页面布局。下面是一个完整攻略，包含了如何使用 CSS 将 div 元素水平居中以及垂直居中的过程和两个示例说明。

CSS 如何将 div 元素水平居中以及垂直居中的过程

1. 使用 flexbox 布局

我们可以使用 CSS 的 flexbox 布局来将 div 元素水平居中以及垂直居中。下面是一个示例：

<div class="container">
  <div class="box"></div>
</div>

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

.box {
  width: 200px;
  height: 200px;
  background-color: #ddd;
}

上述代码中，我们使用 flexbox 布局将 div 元素水平居中以及垂直居中。我们将 .container 元素的 display 属性设置为 flex，以启用 flexbox 布局。我们将 .container 元素的 justify-content 属性设置为 center，以使其水平居中。我们将 .container 元素的 align-items 属性设置为 center，以使其垂直居中。我们还将 .container 元素的高度设置为 100vh，以使其占据整个视口。我们将 .box 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ddd，以使其更加美观。

2. 使用 absolute 定位

我们也可以使用 CSS 的 absolute 定位来将 div 元素水平居中以及垂直居中。下面是一个示例：

<div class="container">
  <div class="box"></div>
</div>

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

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #ddd;
}

上述代码中，我们使用 absolute 定位将 div 元素水平居中以及垂直居中。我们将 .container 元素的 position 属性设置为 relative，以使其成为 .box 元素的相对定位容器。我们将 .container 元素的高度设置为 100vh，以使其占据整个视口。我们将 .box 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box 元素的 top 属性设置为 50%，以使其垂直居中。我们将 .box 元素的 left 属性设置为 50%，以使其水平居中。我们将 .box 元素的 transform 属性设置为 translate(-50%, -50%)，以使其相对于自身的宽度和高度向左上方移动 50%。我们还将 .box 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ddd，以使其更加美观。

示例说明

下面是两个示例，演示如何使用 CSS 将 div 元素水平居中以及垂直居中。

示例一：使用 flexbox 布局

<div class="container">
  <div class="box"></div>
</div>

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

.box {
  width: 200px;
  height: 200px;
  background-color: #ddd;
}

上述代码中，我们使用 flexbox 布局将 div 元素水平居中以及垂直居中。我们将 .container 元素的 display 属性设置为 flex，以启用 flexbox 布局。我们将 .container 元素的 justify-content 属性设置为 center，以使其水平居中。我们将 .container 元素的 align-items 属性设置为 center，以使其垂直居中。我们还将 .container 元素的高度设置为 100vh，以使其占据整个视口。我们将 .box 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ddd，以使其更加美观。

示例二：使用 absolute 定位

<div class="container">
  <div class="box"></div>
</div>

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

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #ddd;
}

上述代码中，我们使用 absolute 定位将 div 元素水平居中以及垂直居中。我们将 .container 元素的 position 属性设置为 relative，以使其成为 .box 元素的相对定位容器。我们将 .container 元素的高度设置为 100vh，以使其占据整个视口。我们将 .box 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box 元素的 top 属性设置为 50%，以使其垂直居中。我们将 .box 元素的 left 属性设置为 50%，以使其水平居中。我们将 .box 元素的 transform 属性设置为 translate(-50%, -50%)，以使其相对于自身的宽度和高度向左上方移动 50%。我们还将 .box 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ddd，以使其更加美观。