How to get text centering horizontally and vertically?

[mwd]

I've tried to use the display:table method of centering vertically, but I can't quite get it working. My work so far is here:http://jsfiddle.net/PTSkR/11/I'm trying to center that text vertically and horizontally. I think it's a little tougher than normal because I'm using bootstrap spans, but maybe not. Any tips would be awesome! Code: \[code\].side-study-box { background-color: white; color: black; border: 3px solid #0072A6; text-align: center; height: 220px; margin-left: 10px; display: table; padding: 10px; -webkit-box-shadow: 3px 3px 3px #888888; -moz-box-shadow: 3px 3px 3px #888888; box-shadow: 3px 3px 3px #888888;}.side-study-box span { position: relative; width: 100%; font-size: 24px; display: table-cell; vertical-align: middle; }.card-box { background-color: #f5f5f5; color: black; margin-right: 0px; margin-bottom: 15px; margin-top: 15px; padding: 5px 0 5px 0;}<div data-bind="visible: !editing()" class="row-fluid card-box"> <div class="span2 card-details-box"> </div> <div class="span5 side-study-box"> <span>TEST</span> </div> <div class="span5 side-study-box"> <span>TEST</span> </div></div>\[/code\]