Centering a CSS3 shape - html

Question

I'm trying to center an anchor tag which is displayed as a CSS3 shape (a large "play"-arrow) in a div.
My markup is as follows:
<div class="element halfcol">
<div class="inner beige-bg fullheight">
<div class="element-content">
</div>
</div>
</div>
And the CSS is:
.element {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.element .inner {
border: 2px solid #94111e;
min-height: 50px;
border-radius: 10px;
background-color: #fcf9e3;
height: inherit;
-moz-box-shadow: 2px 2px 6px #646464;
-webkit-box-shadow: 2px 2px 6px #646464;
box-shadow: 2px 2px 6px #646464;
}
.element .inner .element-content {
padding: 10px 15px;
height: inherit;
}
.element .inner .no-padding {
padding: 0px;
}
.element .beige-bg {
background-color: #fcf9e3;
}
.element .red-bg {
background-color: #94111e;
}
.element .transparent-bg {
background-color: transparent;
}
.element .white-bg {
background-color: #ffffff;
}
.element .smallheight,
.element .doubleheight,
.element .fullheight {
overflow-y: hidden;
}
.element .smallheight {
height: 90px;
}
.element .doubleheight {
height: 220px;
}
.element .doubleheight .element-content {
position: relative;
}
.element .fullheight {
height: 350px;
}
.element .no-padding {
padding: 0px !important;
}
/**** Shapes ****/
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
Which gives me this:
What I'm looking for is this:
I could just give it a margin top/left to center it, but the .element container is of variable height and width.
Anyone know how to achieve this? :-)
Thanks in advance!

Answer 1

You need to make the .element-content be position:relative and then
add
position:absolute;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-50px;
to the .play-button
Demo at http://jsfiddle.net/jKs6F/

Answer 2

I changed your .play-button class as follows:
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
margin-left: -50px; /* half border-left value */
margin-top: -60px; /* border-top value */
position: relative; left: 50%; top: 50%;
}​​​​​​​​​​​​​​​​​​
See demo