CSS
(This solution only works if the text being vertically centered is a single line.)
Start with your basic div:
<!DOCTYPE html>
<html>
<head>
<title>How to Create Transparency with CSS</title>
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000;}
</style>
</head>
<body>
<div>This is text inside a div.</div>
</body>
</html>
Let’s start the pretty-ing process by first centering the text horizontally:
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000; text-align:center}
</style>
Next, wrap the text in a paragraph (that’s our secret weapon):
<body>
<div><p>This is text inside a div.</p></div>
</body>
And finally, style the paragraph (this is where the magic occurs):
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000; text-align:center}
p {margin:0; line-height:100px;}
</style>
This is text inside a div.
Our final code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>How to Create Transparency with CSS</title>
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000; text-align:center}
p {margin:0; line-height:100px;}
</style>
</head>
<body>
<div><p>This is text inside a div.</p></div>
</body>
</html>
I have to admit, I always end up using a table instead. This makes it so much easier.