如何为代码绘制的爱心添加400×400像素的可见包围盒？

要实现将爱心放入400×400像素的可见包围盒并居中，只需做以下两步改动：

1. 新增外层容器 #

在现有的.left和.right外层添加一个容器元素，作为爱心的包围盒。

2. 设置容器样式 #

给这个容器设置固定宽高、可见边框，并通过Flex布局让爱心在盒内水平垂直居中。

修改后的完整代码 #

CSS部分

body {
  margin: 80px;
}
/* 新增包围盒样式 */
.heart-container {
  width: 400px;
  height: 400px;
  border: 2px solid #333; /* 可见边框，可自行调整样式 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.left,
.right {
  display: inline-block;
}
.left {
  width: 170px;
  height: 239px;
  margin-right: -4px;
}

div > div {
  display: block;
  height: 34px;
}
div > div > div {
  width: 30px;
  height: 30px;
  background-color: red;
  display: inline-block;
  float: right;
  margin: 2px;
}
div.right > div > div {
  float: left;
}

HTML部分

<div class="heart-container">
  <div class="left">
    <div style="padding-right: 68px">
      <div></div>
      <div></div>
    </div>
    <div style="padding-right: 34px">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
  <div class="right">
    <div style="padding-left: 34px">
      <div></div>
      <div></div>
    </div>
    <div style="">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
</div>

关键说明 #

• .heart-container的border属性让包围盒清晰可见，你可以根据需求调整边框的颜色、粗细或样式（比如改成虚线dashed）。
• Flex布局的justify-content和align-items属性自动完成居中，无需手动计算内边距或外边距，适配性更强。

内容的提问来源于stack exchange，提问作者user28597874