Create a responsive diamond shape containing 4 separate diamonds with centered text

Question

Ok, before I start, this is what I am trying to achieve using CSS3:

This consists of a responsive diamond shape container (a square, rotated 45 degrees) and four individual diamonds (originally squares but rotated with the parent element, obviously).

Apart from the 1px spacer between diamonds, I've managed to get the shapes to look how I'd like them to look, but I'm finding it very difficult to center align the letters in each diamond, as you can see from my JSFIDDLE DEMO.

HTML

<div id="cover">
    <div class="cover-logo-wrapper">
        <div id="cover-logo">
            <div id="cover-logo-box-1" class="cover-logo-boxes">
                <span>T</span>
            </div>
            <div id="cover-logo-box-2" class="cover-logo-boxes">
                <span>D</span>
            </div>
            <div id="cover-logo-box-3" class="cover-logo-boxes">
                <span>O</span>
            </div>
            <div id="cover-logo-box-4" class="cover-logo-boxes"></div>
        </div>
    </div>
</div>

CSS

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

#cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#cover-logo-wrapper {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 10%;
    height: 0;
    padding: 5% 0;
    border: solid 1px rgba(255,255,255,0.2);
}

#cover-logo {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 0;
    padding: 50% 0;
    background: #FFF;
    text-align: center;
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cover-logo-boxes {
    position: absolute;
    width: 50%;
    height: 50%;
}

.cover-logo-boxes span {
    display: block;
    -ms-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    margin: 0 auto;
    text-align: center;
}

#cover-logo-box-1 {
    left: 0;
    top: 0;
    background: red;
}

#cover-logo-box-2 {
    right: 0;
    top: 0;
    background: yellow;
}

#cover-logo-box-3 {
    left: 0;
    bottom: 0;
    background: green;
}

#cover-logo-box-4 {
    right: 0;
    bottom: 0;
    background: blue;
}

Please could somebody point out where I have gone wrong. I assumed using translateY: -50% would have been the winner, but it wasn't.

Answer 1

Try this

.cover-logo-boxes span {
    display: block;
    transform: translate(-50% -50%);
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
     -ms-transform: translate(-50%, -50%) rotate(-45deg);
     -moz-transform: translate(-50%, -50%) rotate(-45deg);
    top: 50%;
    left: 50%;
    position: absolute;
}

Demo

Answer 2

Try this

.cover-logo-boxes span {
    display: block;
    position: absolute;  //added this
    left: 50%; //added this
    top: 50%; //added this
    -ms-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    margin: 0 auto;
    text-align: center;
}

Demo Here