Question

I searched for this, but found no solution.
I have an anchor with a text.

The height and width of the anchor are set by JS on DOM load
I need the text inside the anchor centered vertically and horizontally.

Followed many tutorials on centering elements. None of them worked.

Here is my html

<a href="#" class="wpsc_category_grid_item" title="Category1">
    <span>Category1</span>
</a>

And my CSS

.wpsc_category_grid_item {
    background: #000;
    margin:1px;
    float:left;
    text-align: center;
    display:table;
}

.wpsc_category_grid_item span{
    display: table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
    color:#fff;
    text-align: center;
    font-weight: bold;
    text-decoration: none; 
}

I need these texts, vertically centered as well..

Answer 1

I made a js fiddle with your code. It worked after I added

width: 100%;
height:100%;

to .wpsc_category_grid_item