Centre combined divs - css

Question

EDIT: All sorted now. Thanks to everyone that helped! :)
I am having trouble centering an element of my website. It is 3 divs mixed together to form a hexagon.
I cannot center it.
HTML:
<li>
<div class="centerhex">
<a href="#">
<div class="hexa">
<div class="hexcontainer">
<div class="vertical-align">
<span class="hextext">Lorem Ipsum Dolor</span>
</div>
</div>
</div>
</a>
</div>
</li>
CSS:
.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}
.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
}
.hexa::after {
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
-ms-transform:rotate(-60deg);
}
.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.vertical-align {
display: table;
height: 100%;
width: 100%;
}
Also, I need help so the bottom of the shape isn't cut off.
URL: http://jackmarshallphotography.co.uk/V1/donate.html

Answer 1

There are few things to change in your css, I worked directly on your website with the chrome developer tool, please find below the css to center the "tag" :
.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}
.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}
.servicebox ul li {
margin-left: 12px;
}
.centerhex {
margin: auto;
width: 210px;
height: 300px;
}
Hope it helps.
For the second issue :
you need to edit the file hexagon.css and change the margin-top property find the right value: -65px or more (line 47)
Yoann

Answer 2

Let me see if I can help you with a simple example.
Have a fiddle - fiddle link!
Edit! - Here is another fiddle without absolute positioning... seems like this can be achieved without it - fiddle link - no absolute positioning
Absolute positioning example:
HTML
<div id="parentOfCentered">
<div id="perfectlyCentered"></div>
</div>
CSS
#parentOfCentered {
position: relative; /* Absolutely positioned children will be positioned in relation to the parent div */
background: #CCC;
width: 400px;
height: 400px;
}
#perfectlyCentered {
width: 200px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
/*
- negative top margin of half the height
- negative left margin of half the width
*/
}