编写一段html代码实现一个div块中嵌了另外一个div，并且内嵌的块居中，设置有背景颜色

可以使用以下的HTML和CSS代码实现要求的效果：

<div class="outer-div">
  <div class="inner-div"></div>
</div>

.outer-div {
  background-color: #f5f5f5;
  text-align: center; /* 让内部块居中 */
  height: 400px; /* 设置高度，方便查看效果 */
}

.inner-div {
  width: 200px;
  height: 200px;
  background-color: #e0e0e0;
  display: inline-block; /* 让块元素变成行内块元素 */
  vertical-align: middle; /* 让行内块元素垂直居中 */
}

解释一下这段代码的实现思路：

首先，外部的`<div>`元素设置了一个背景颜色，并且通过`text-align: center`让内部内容居中。

内部的`<div>`元素设置了一个固定的宽、高和背景颜色，同时通过`display: inline-block`让其变成行内块元素，这样可以让它在外部容器中水平对齐，但是默认情况下还是会在上下方向上与外部容器的文本基线对齐。因此，还需要通过`vertical-align: middle`让行内块元素垂直居中。最终的效果是内部块垂直水平居中，且有背景颜色。