div 在父div中水平居中

在HTML和CSS中，让一个`<div>`在父`<div>`中水平居中，可以采用多种方法，以下是常见的几种：

1. **内联元素**（如`<p>`）：如果是行内元素，可以直接使用`text-align: center`对父元素进行设置，然后添加`display: inline-block`或`float: left`等使其变为块级元素：

<div class="parent">
  <div class="child">I'm centered</div>
</div>

<style>
.parent {
  text-align: center;
}
.child {
  display: inline-block;
}
</style>

2. **块级元素**（如`<div>`）：使用Flexbox或者Grid布局，或者利用传统的`margin: auto`技巧，这会平均分配剩余空间：

.parent {
  display: flex; /* 或者 grid, flex-direction: row */
  justify-content: center;
}

.child {
  /* 或者直接 margin: 0 auto; */
}

3. **绝对定位**：通过设置`position: absolute`并配合`left: 50%`和`transform: translateX(-50%)`：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

以上每种方法都适用于不同的场景和需求，选择最适合的取决于你的项目结构和个人偏好。