Centering of two hexagons - html

Question

I have two hexagons, one is for the main background and other is for border, but the main inside hex is a little bit out of his place.
.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>
How can i put in the middle my main hex to inside borders hex?
i tried to use margins from hexagon div, but both hex moving in the same time. What is the best way to center this hexagons?
How i expect : https://imgur.com/a/aUNHu8L

Answer 1

You can use "Flexbox" for horizontal and vertical center.You can learn in FlexBox Guide.For your solution, Remove margin from hexagon-inner class and add
display: flex;
align-items: center;
justify-content: center;
in hexagon class.

Answer 2

3 hexagons using clip-path - img on img
I offer another solution,
This is nice trick to achieve this, you can use percent or 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>
Another solution with not use px or percent, and you can change the position and the attachment - both - in .copy-background and .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>