Question

不确定如何将此六边形居中，设置边距：自动;不会影响整个形状。如果有人能提供帮助，感激不尽，提前谢谢。

.hexagon {
    position: absolute;
    width: 300px; 
    height: 173.21px;
    background-color: #fff;
}

.hexagon:before,
.hexagon:after {

    content: "";
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
}

.hexagon:before {
      bottom: 100%;
      border-bottom: 86.60px solid #fff;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
}

.hexagon:after {
      position: absolute;
      top: 100%;
      width: 0;
      border-top: 86.60px solid #fff;
}

Answer 1

margin:auto如果您完全定位了div以使六边形居中，那么您将无法工作，您必须添加top:50%，left:50%和margin: -86.6px 0 0 -150px。 -86.6px是六边形高度的一半，-150px是宽度的一半。此外，您必须使其父位置相对于100％的高度。

<强> HTML

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

<强> CSS

html,body{
    background-color:#333;
    height: 100%;
    width: 100%;
    position:relative;
}

.hexagon {
    top: 50%;
    left: 50%;
    margin: -86.6px 0 0 -150px ;
}

Fiddle

Answer 2

如果你的意思是水平居中，你可以这样做：http://codepen.io/pageaffairs/pen/fxoHp

.hexagon {left: 0; right: 0; margin: auto;}

Answer 3

你可以把它放到另一个有余量的div中：auto。请参阅此处的代码http://jsfiddle.net/oswxj9c5/

HTML：

<div class="parent">
    <article>
<div class="hexagon">
</div>
    </article>
</div>

的CSS：

.parent {
    position:relative;
    background:blue;
    width:900px;
    height:500px;
    margin:auto;
}

article {
    margin:auto;

    width:300px;
    height:300px;
    background:transparent;
}

.hexagon {
    position: absolute;
    width: 300px; 
    height: 173.21px;
    background-color: red;
    top:150px;
    margin:auto;

}

.hexagon:before,
.hexagon:after {

    content: "";
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
}

.hexagon:before {
      bottom: 100%;
      border-bottom: 86.60px solid red;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
}

.hexagon:after {
      position: absolute;
      top: 100%;
      width: 0;
      border-top: 86.60px solid red;
}

如何使CSS Hexagon居中

3 个答案:

Fiddle