如何围绕中心图像包裹元素

Question

我有一个容器，它有一个需要居中的图像和多个环绕容器的按钮。

向左或向右浮动给出了正确的行为，但目标是让它水平浮动居中，垂直浮动在中间。我附上了所需结果的图片

Answer 1

希望对你有帮助

body {
  background-color: #4472c4;
}
.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: center;
  align-items: center;
}

div div{
  background-color: #71ad47;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}
.div2 {
  grid-area: 1 / 2 / 2 / 3;
}
.div3 {
  grid-area: 1 / 3 / 2 / 4;
}
.div4 {
  grid-area: 1 / 4 / 2 / 5;
}
.div5 {
  grid-area: 1 / 5 / 2 / 6;
}
.div6 {
  grid-area: 2 / 1 / 3 / 2;
}
.div7 {
  grid-area: 2 / 5 / 3 / 6;
}
.div8 {
  grid-area: 3 / 1 / 4 / 2;
}
.div9 {
  grid-area: 3 / 5 / 4 / 6;
}
.div10 {
  grid-area: 4 / 1 / 5 / 2;
}
.div11 {
  grid-area: 4 / 5 / 5 / 6;
}
.div12 {
  grid-area: 5 / 1 / 6 / 2;
}
.div13 {
  grid-area: 5 / 2 / 6 / 3;
}
.div14 {
  grid-area: 5 / 3 / 6 / 4;
}
.div15 {
  grid-area: 5 / 4 / 6 / 5;
}
.div16 {
  grid-area: 5 / 5 / 6 / 6;
}
.div17 {
  grid-area: 2 / 2 / 5 / 5;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  background-color: #ed7d31;
}

    <div class="parent">
      <div class="div1">1</div>
      <div class="div2">2</div>
      <div class="div3">3</div>
      <div class="div4">4</div>
      <div class="div5">5</div>
      <div class="div6">6</div>
      <div class="div7">7</div>
      <div class="div8">8</div>
      <div class="div9">9</div>
      <div class="div10">10</div>
      <div class="div11">11</div>
      <div class="div12">12</div>
      <div class="div13">13</div>
      <div class="div14">14</div>
      <div class="div15">15</div>
      <div class="div16">16</div>
      <div class="div17"></div>
      </div>