How can I vertically and horizontally align text over an image?

How can I vertically and horizontally align text over an image?

I have a simple image of a ball which I am using as a background. I would
like to overlay text. The text will be a number, i.e. a lottery number.
I have tried various methods but cannot find a solution, e.g.
CSS
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:relative;
left:0;
top:0;
}
#text
{
position:absolute;
color:black;
font-size:18px;
font-weight:bold;
text-align:center;
top:0px;
}
<div id="container">
<img id="image"
src="http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif"/>
<p id="text">37</p> </div>
</pre>
I just cannot get the number to align vertically and horizontally in the
ball.
Any ideas or suggestions?
Thanks and regards