div设置两个盒子如何让第二个盒子居中在第一个盒子内

可以使用CSS的flex布局来实现这个效果。具体步骤如下：

1. 在HTML中，创建一个父级div，里面包含两个子div。

<div class="parent">
  <div class="child1">第一个盒子</div>
  <div class="child2">第二个盒子</div>
</div>

2. 在CSS中，设置父级div的样式为flex布局，并使用justify-content和align-items属性将子div居中。

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 父级div的高度 */
  border: 1px solid #ccc;
}

.child1 {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.child2 {
  width: 100px;
  height: 100px;
  background-color: #00f;
}

这样就可以让第二个盒子在第一个盒子内水平和垂直居中了。需要注意的是，父级div要设置一个固定的高度，否则无法垂直居中。