两个六角形的居中

Question

我有两个六边形，一个用于主要背景，另一个用于边界，但是主要的内部六边形稍微偏离了他的位置。

    .hexagon {
        position: relative;
        width: 179.1px; 
        height: 103.40px;
        margin: 51.70px 0;
        border-left: solid 5px #c94400;
        border-right: solid 5px #c94400;
      }
      
      .hexagon:before,
      .hexagon:after {
        content: "";
        position: absolute;
        z-index: 1;
        width: 126.64px;
        height: 126.64px;
        -webkit-transform: scaleY(0.5774) rotate(-45deg);
        -ms-transform: scaleY(0.5774) rotate(-45deg);
        transform: scaleY(0.5774) rotate(-45deg);
        background-color: inherit;
        left: 21.2286px;
      }
      
      .hexagon:before {
        top: -63.3214px;
        border-top: solid 7.0711px #c94400;
        border-right: solid 7.0711px #c94400;
      }
      
      .hexagon:after {
        bottom: -63.3214px;
        border-bottom: solid 7.0711px #c94400;
        border-left: solid 7.0711px #c94400;
      }



      .hexagon-inner {
        position: relative;
        width: 160px; 
        height: 92.38px;
        background-color: rgba(42, 42, 42, 0.66);
        margin: 46.19px 0;
      }
      
      .hexagon-inner:before,
      .hexagon-inner:after {
        content: "";
        position: absolute;
        width: 0;
        border-left: 80px solid transparent;
        border-right: 80px solid transparent;
      }
      
      .hexagon-inner:before {
        bottom: 100%;
        border-bottom: 46.19px solid rgba(42, 42, 42, 0.66);
      }
      
      .hexagon-inner:after {
        top: 100%;
        width: 0;
        border-top: 46.19px solid rgba(42, 42, 42, 0.66);
    }
}

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

如何将主六角形放在中间的内六角形中间？我尝试使用六角形div的边距，但是两个六角形同时移动。使六边形居中的最佳方法是什么？

我的期望：https://imgur.com/a/aUNHu8L

Answer 1

您可以在水平和垂直中心使用“ Flexbox”。您可以在FlexBox Guide中学习。对于您的解决方案，请从内六角类中删除边距并添加

display: flex;
align-items: center;
justify-content: center;

六角类。

Answer 2

使用剪切路径的三个六边形-img上的img

我提供另一种解决方案，

这是实现此目的的好技巧，您可以使用百分比或px。

.container {
  height: 240px;
  width: 240px;
  background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hexagon {
  transform: rotate(30deg);
  /* height: 173.2px; */
  /* width: 200px; */
  height: 69.28%;
  width: 80%;
  position: relative;
}
.hex {
  position: absolute;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.hexagon1 {
  height: 100%;
  width: 100%;
  background-color: rgb(201, 68, 0);
}
.hexagon2 {
  height: 92%;
  width: 92%;
  top: 4%;
  left: 4%;
}
.copy-background {
  transform: rotate(-30deg);
  height: 124%;
  width: 124%;
  position: relative;
  top: -12%;
  left: -12%;
  background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
  /* background-size: 320px; */
  /* background-position: -6px -21px; */
  background-size: 146%;
  background-position: 10% 50%;
  background-repeat: no-repeat;
}
.hexagon3 {
  height: 84%;
  width: 84%;
  top: 8%;
  left: 8%;
  background-color: rgba(35, 35, 35, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
.text {
  transform: rotate(-30deg);
}

<div class="container">
  <div class="hexagon">
    <div class="hex hexagon1"></div>
    <div class="hex hexagon2">
      <div class="copy-background"></div>
    </div>
    <div class="hex hexagon3">
      <span class="text">VONIA</span>
    </div>
  </div>
</div>

另一种不使用px或percent的解决方案，您可以在.copy-background和.container中更改位置和附件-两者->

.container {
  height: 240px;
  width: 240px;
  background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hexagon {
  transform: rotate(30deg);
  height: 69.28%;
  width: 80%;
  position: relative;
}
.hex {
  position: absolute;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.hexagon1 {
  height: 100%;
  width: 100%;
  background-color: rgb(201, 68, 0);
}
.hexagon2 {
  height: 92%;
  width: 92%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.copy-background {
  overflow: hidden;
  top: 0;
  left: -18%;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 240px;
  width: 240px;
  transform: rotate(-30deg);
  position: absolute;
  background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.hexagon3 {
  height: 84%;
  width: 84%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(35, 35, 35, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
.text {
  transform: rotate(-30deg);
}
<div class="container">
  <div class="hexagon">
    <div class="hex hexagon1"></div>
    <div class="hex hexagon2">
      <div class="copy-background"></div>
    </div>
    <div class="hex hexagon3">
      <span class="text">VONIA</span>
    </div>
  </div>
</div>