title: Center CSS3 Hexagon
body: <p>I like to center a CSS3 hexagon inside a div (have a look on the Screenshot below). I use the Foundation Framework, so the Hexagon is wrapped by a column-wrapper (in these case with the class "warpper").</p>
  
  <p>My CSS:</p>
  
  <pre><code>.wrapper {
      width: 1000px;
  }
  
  .hexagon {
    position: relative;
    width: 300px; 
    height: 173.21px;
    margin: 86.60px 0;
    background-image: url(http://csshexagon.com/img/meow.jpg);
    background-size: auto 346.4102px;
    background-position: center;
  }
  
  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 212.13px;
    height: 212.13px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 43.93px;
  }
  
  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 300.0000px;
    height: 173.20508075688775px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
  }
  
  .hexTop {
    top: -106.0660px;
  }
  
  .hexTop:after {
    background-position: center top;
  }
  
  .hexBottom {
    bottom: -106.0660px;
  }
  
  .hexBottom:after {
    background-position: center bottom;
  }
  
  .hexagon:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 300.0000px;
    height: 173.2051px;
    z-index: 2;
    background: inherit;
  }
  </code></pre>
  
  <p>My Full-Code on JSFiddle: <a href="http://jsfiddle.net/oa0j4ba8/1/" rel="nofollow noreferrer">http://jsfiddle.net/oa0j4ba8/1/</a></p>
  
  <p><img src="https://i.stack.imgur.com/9rni8.png" alt="enter image description here"></p>