2 questions: how to center wrapper vertically, and which file formats are best to use online?

Hi,
Thanks for trying to answer my question! My website is http://www.ballersblock.com and I am having trouble centering the page horizontally. From what I've learned in html, I just wanted to put all the element blocks inside my wrapper, and center the page. I used absolute positioning and I've tried several ways to get the whole wrapper centered. Suggestions? Also, I used paint .net for my background images, and they do not show up properly. When I upload images from my camera, they are fine, but for some reason I'm having trouble with .jpg and .png images. Any suggestions? Thanks in advance.

Baller's Block

• Future



• Life


• Health


• Employment


• Starting a Business


• Education

• Family



• Prenuptial Agreements


• Marriage


• Planning for Children


• Child Support/Custody


• Divorce


• Caring for Parents

• Welcome to the Block



• Cars


• Travel


• Jewelry


• Treasure

• Finances



• Saving and Budgeting


• Investing


• Life/Health Insurance


• Trust Funds


• Retirement


• Wealth Preservation

• Find a Lawyer



• Lawyer Lookup

a{ color: rgb(0,50,50); } a:hover { color: red; } a:visited{ color: rgb(0,50,50); }

body{
background-image: url('Storm.JPEG');
background-color: purple;
text-align: center;
width: 760px;

}

.wrapper{
width: 760px;
text-align: left;
margin-left: auto;
margin-right: auto;

}

#banner{
color: rgb(0,50,50);
font-family: arial, helvetica, sans-serif;
height: 90px;
width: 760px;
text-align: center;
background-color: #ccc;
border-style: solid;
border-width: 2px;
border-left-width: 10px;
border-right-width: 10px;
border-color: green;
}

.future{
position: absolute;
top: 210px;
left: 110px;
width: 180px;
}
.family{
position: absolute;
top: 190px;
left: 470px;
width:180px;
}
.ballersblock{
border-width: 3px;
text-align: center;
position: absolute;
left: 290px;
top: 310px;
width: 180px;
}
.finances{
position: absolute;
left: 110px;
top: 410px;
width: 180px;
}
.lawyer{
position: absolute;
left: 470px;
top: 410px;
width: 180px;
}

#footer{

}

ul{
text-align: center;
font-size: 12px;
background-color: #ccc;
margin: 5px;
padding: 5px;
border-style: solid;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: green;
}

h1{
font-style: oblique;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
line-height: 26px;
}
h2{
font-style: oblique;
font-size: 10px;
line-height: 11px;
}
h3{
font-style: oblique;
font-size: 7.5px;
line-height: 6px;
font-style: italic;
font-weight: lighter;
}
h4{
text-align: center;
border-style: solid;
border-width: 1px;
border-left-width: 5px;
border-right-width: 5px;
border-color: green;
}

//mod edit: link made clickable
--gary.turner