How to center a changed .tile-title

I'm using this simple CSS to replace the default title ('DS1') with 'Garage Temp'.

#tile-28 .tile-title {
visibility: hidden;
}
#tile-28 .tile-title:after {
visibility: visible;
content: 'Garage Temp';
}

Problem is that is simply puts the 'Garage Temp' text after the hidden original text so it is off-center in the tile. Any good workarounds for this?