Centrering af divs virker ikke som forventet

Nogen der kan hjælpe?

Prøv i dine newbox1 osv at sætte margin: auto;
Du kan i øvrigt sætte flere classes, så sparer du lidt bytes i css'en. Dine newbox1 osv kan forkortes fra:

.newbox1 {
    filter: alpha(opacity=80); /* ie */
    -moz-opacity: 0.8;        /* moz + ff */
    opacity: 0.8;              /* alt der understøtter CSS 3 */
    z-index: 2;
    display:none;
    position: absolute;
    top: 65px;
    width: 482px;
    height: 230px;
    background-color: #9D080D;
    border: 10px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
    font-style: italic;
}
.newbox2 {
    filter: alpha(opacity=80); /* ie */
    -moz-opacity: 0.8;        /* moz + ff */
    opacity: 0.8;              /* alt der understøtter CSS 3 */
    z-index: 2;
    display:none;
    position: absolute;
    top: 65px;
    width: 482px;
    height: 230px;
    background-color: #3A7C85;
    border: 10px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
    font-style: italic;
}
.newbox3 {
    filter: alpha(opacity=80); /* ie */
    -moz-opacity: 0.8;        /* moz + ff */
    opacity: 0.8;              /* alt der understøtter CSS 3 */
    z-index: 2;
    display:none;
    position: absolute;
    top: 65px;
    width: 482px;
    height: 230px;
    background-color: #7C9251;
    border: 10px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
    font-style: italic;
}
.newbox4 {
    filter: alpha(opacity=80); /* ie */
    -moz-opacity: 0.8;        /* moz + ff */
    opacity: 0.8;              /* alt der understøtter CSS 3 */
    z-index: 2;
    display:none;
    position: absolute;
    top: 65px;
    width: 482px;
    height: 230px;
    background-color: #FF7C1E;
    border: 10px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
    font-style: italic;
}

Til:

.newbox {
    filter: alpha(opacity=80); /* ie */
    -moz-opacity: 0.8;        /* moz + ff */
    opacity: 0.8;              /* alt der understøtter CSS 3 */
    z-index: 2;
    display:none;
    position: absolute;
    top: 65px;
    width: 482px;
    height: 230px;
    border: 10px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
    font-style: italic;
}
.newbox1 {
    background-color: #9D080D;
}
.newbox2 {
    background-color: #3A7C85;
}
.newbox3 {
    background-color: #7C9251;
}
.newbox4 {
    background-color: #FF7C1E;
}

Så skal du bare ændre:

<div class="newbox1" id="link1">

til:

<div class="newbox newbox1" id="link1">

osv

Ja, så glemte jeg selv at sætte margin: auto; ind i .newbox  ;)

Ok, testede lige - Det virker ikke :)
Her er et helt opdateret stylesheet:

body {
    margin: 0px;
    padding: 0px;
    background-color: #EAE9EE;
    font-family: verdana, sans-serif;
    text-align: center;
}
.main {
    z-index: 1;
    width: 490px;
    margin: auto;
}
.box {
    background-image: url('img/box.PNG');
    background-repeat: no-repeat;
    height: 96px;
    width: 114px;
}
.sitename {
    padding-left: 30px;
    padding-bottom: 10px;
    text-align: left;
    color: #808080;
    font-size: 18px;
    font-family: "Courier New", verdana, sans-serif;
    padding-left: 15px;
}
.copyright {
    padding-right: 30px;
    padding-top: 5px;
    text-align: right;
    color: #808080;
    font-size: 18px;
    font-family: "Courier New", verdana, sans-serif;
    padding-right: 15px;
}
.header {
    color: #FFFFFF;
    font-size: 16px;
    font-family: "Courier New", verdana, sans-serif;
    text-align: left;
}
.closebox {
    cursor: pointer;
}
.newbox {
    filter: alpha(opacity=80); /* ie */
    -moz-opacity: 0.8;        /* moz + ff */
    opacity: 0.8;              /* alt der understøtter CSS 3 */
    z-index: 2;
    display:none;
    position: relative;
    top: -230px;
    width: 482px;
    height: 230px;
    border: 10px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
    font-style: italic;
    margin: auto;
}
.newbox1 {
    background-color: #9D080D;
}
.newbox2 {
    background-color: #3A7C85;
}
.newbox3 {
    background-color: #7C9251;
}
.newbox4 {
    background-color: #FF7C1E;
}
.boxmain {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 40px;
    padding-bottom: 40px;
    text-align: left;
    line-height: 22px;
}

Jeg har lavet din

<div align="center">

om til blot:

<div>

Dine popup bokse om til:

    <div class="newbox newbox1" id="link1">
        <span onclick="toggle('link1');return false" class="closebox" title="Luk"><img src="img/close_red.PNG" border="0"></span>
        <div class="boxmain">
            <span class="header">Lorem Ipsum</span><br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>

    </div>

    <div class="newbox newbox2" id="link2">
        <span onclick="toggle('link2');return false" class="closebox" title="Luk"><img src="img/close_blue.PNG" border="0"></span>
        <div class="boxmain">
            <span class="header">Lorem Ipsum</span><br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>

    <div class="newbox newbox3" id="link3">
        <span onclick="toggle('link3');return false" class="closebox" title="Luk"><img src="img/close_green.PNG" border="0"></span>
        <div class="boxmain">
            <span class="header">Lorem Ipsum</span><br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>

    <div class="newbox newbox4" id="link4">

        <span onclick="toggle('link4');return false" class="closebox" title="Luk"><img src="img/close_orange.PNG" border="0"></span>
        <div class="boxmain">
            <span class="header">Lorem Ipsum</span><br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>

Så ser det ud til at virke...

Du får lige et svar også :)

Endelig! :-)
Har rodet med dette i 3-4 timer nu !!

Det er rart at se at man sagtens kan få svar på eksperten i de sene timer ;-)

Tak skal du have.