大div里面的小div居中，代码怎么写

如果你想让大`<div>`里的小`<div>`水平垂直都居中，可以采用多种方法实现。以下是几种常见的CSS样式：

1. **Flex布局**:

<div class="parent">
  <div class="child">内容</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  height: 100%; /* 如果需要整个容器的高度为100%，这里设置高度 */
}

.child {
  width: 50%;
  padding: 20px; /* 可选，增加边距 */
}
</style>

2. **Grid布局**:

<div class="parent">
  <div class="child">内容</div>
</div>

<style>
.parent {
  display: grid;
  place-items: center; /* 同样实现水平垂直居中 */
  height: 100vh;
}

.child {
  background-color: #f00; /* 仅作示例，替换为实际颜色 */
}
</style>

3. **绝对定位 + 绝对宽度/高度** (如果父元素有固定大小)：

<div class="parent" style="position: relative;">
  <div class="child" style="position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);">
    内容
  </div>
</div>