如何将一个 div 居中放置在另一个 div 中？

在前端开发中，我们经常需要将一个 div 居中放置在另一个 div 中，比如：将一个文本框放在页面中央。下面介绍几种实现方式。

方法一：使用 Flexbox

Flexbox 是一种强大的布局方式，它可以让元素在容器中自由地伸缩和分布。使用 flex 属性可以很容易地让一个 div 在另一个 div 中居中。

HTML 代码

<div class="container">
  <div class="center">This is the content to be centered</div>
</div>

CSS 代码

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 将容器设置为屏幕的高度 */
}
.center {
  text-align: center; /* 如果要让容器中的文本居中，可以添加该属性 */
}

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

利用绝对定位和 transform 属性可以让内部的 div 相对于外部的 div 居中。

HTML 代码

<div class="container">
  <div class="center">This is the content to be centered</div>
</div>

CSS 代码

.container {
  position: relative;
  height: 100vh; /* 将容器设置为屏幕的高度 */
}

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

方法三：使用 Grid 布局

使用 Grid 布局也可以很容易地让一个 div 在另一个 div 中居中。

HTML 代码

<div class="container">
  <div class="center">This is the content to be centered</div>
</div>

CSS 代码

.container {
  display: grid;
  place-items: center;
  height: 100vh; /* 将容器设置为屏幕的高度 */
}