Position image in center with spillover regardless of window size - html

Question

I'm having some problems positioning a logo (img) on my site. I want it to be centered at all times and window sizes. At the same time, I want it to overlap/spillover in the bottom of the div it's in.
It's placed in the div main and I want it to go over the div called nav. I haven't had any problems making it overlap, but it simply won't stay centered!
Any suggestions?
CSS
body {
width:100%;
font-family: Cusmyr, sans serif;
font-size:2em;
margin:0em;
}
#font-face {
font-family:Cusmyr;
src: url('font/myriadproregot.otf'), url('font/myriadproregsv.svg'), url('font/myriadproregtt.ttf');
}
#nav {
background:#ffffff;
width:100%;
height:4em;
margin-top:-18px;
}
#nav ul {
list-style-type:none;
}
#nav li {
display:inline;
float:left;
width:2%;
margin-left:10%;
margin-right:10%;
margin-top:5%;
}
#nav a {
display:block;
width:20%;
margin-right:0% auto;
padding-left:0% auto;
color:#5E09CB;
text-decoration:none;
}
.clear {
clear:both;
}
#logo {
position: absolute;
}
#main {
width:100%;
position:relative;
border-top: 0.1em solid #000000;
}
#main img {
margin-bottom:-0.1em;
padding:0em;
}
#text-left p {
position:absolute;
color:#ffffff;
padding-left:8%;
padding-top:8%;
letter-spacing:0.1em;
line-height:1.1;
}
#text-right p {
position:absolute;
color:#ffffff;
padding-left:75%;
padding-top:8%;
letter-spacing:0.1em;
line-height:1.1;
}
#enter {
display:block;
position:absolute;
width:7em;
height:1.5em;
bottom:5%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background-color:#39895B;
-moz-box-shadow: 0px 3px 14px #000000;
-webkit-box-shadow: 0px 3px 14px #000000;
box-shadow: 0px 3px 14px #000000;
border-radius:3px;
-moz-border-radius:3px;
}
#enter a {
position:absolute;
text-align:center;
font-size:1em;
line-height:0.0em;
color:#ffffff;
margin-top:0.8em;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-decoration:none;
}
#donations p {
position:absolute;
color:#ffffff;
font-size:0.65em;
text-align:left;
margin-bottom:10%;
left:1%;
width:12em;
}
#donations {
position:relative;
width:100%;
height:8em;
background-color:#333334;
margin-top:-1%;
border-top:0.1em solid #000000;
overflow:hidden;
}
#donations a {
display:block;
position:absolute;
text-align:center;
font-size:0.8em;
width:6em;
padding:0.2em;
height:1.1em;
bottom:8%;
left:10%;
right:0;
background-color:#5E09CB;
color:#ffffff;
-moz-box-shadow: 0px 3px 14px #000000;
-webkit-box-shadow: 0px 3px 14px #000000;
box-shadow: 0px 3px 14px #000000;
border-radius:3px;
-moz-border-radius:3px;
text-decoration:none;
}
.dontime p {
position:absolute;
text-decoration:underline;
float:right;
right:0;
width:15em;
top:-3%;
margin-right:1%;
color:#ffffff;
font-size:0.65em;
}
.meter {
height:20px;
width:30%;
position:relative;
background:#555;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:3px;
margin-top:1%;
left:1%;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color:#5E09CB;
background-image: -moz-linear-gradient(top, #8959c6, #5E09CB);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8959c6),color-stop(1, #5E09CB));
background-image: -webkit-linear-gradient(#8959c6, #5E09CB);
}
#gallery {
position:relative;
margin-top:0em;
width:100%;
padding-bottom:5em;
background-color:#ffffff;
border-top:0.1em solid #000000;
overflow:hidden;
}
#gallerytext p {
color:#DACB29;
text-align:center;
margin-top:4%;
}
#kranz img {
display:block;
margin-top:-5%;
margin-left:auto;
margin-right:auto;
}
#pic1 img {
display:block;
float:left;
margin-left:10%;
margin-top:-7%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic2 img {
display:block;
float:left;
margin-left:10%;
margin-top:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic3 img {
display:block;
float:left;
margin-left:10%;
margin-top:-7%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic4 img {
display:block;
float:left;
margin-top:22%;
margin-left:-80%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic5 img {
display:block;
float:left;
margin-top:35%;
margin-left:-50%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic6 img {
display:block;
float:left;
margin-top:22%;
margin-left:-20%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic7 img {
display:block;
float:left;
margin-top:50%;
margin-left:-85%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic8 img {
display:block;
float:left;
margin-top:60%;
margin-left:-55%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic9 img {
display:block;
float:left;
margin-top:55%;
margin-left:-25%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
.clock {
position:absolute;
right:-1.5%;
bottom:1%;
width:25em;
}
.clock_days {
margin-right:0.5%;
float:left;
}
.clock_hours {
margin-right:0.5%;
float:left;
}
.clock_minutes {
margin-right:0.5%;
float:left;
}
.clock_seconds {
margin-right:0.5%;
float:left;
}
.bgLayer {
background-image:url(img/bg.png);
background-repeat:no-repeat;
position:relative;
}
.topLayer {
position:absolute;
background-image:url(img/top.png);
width:6em;
height:6em;
margin-bottom:5%;
background-repeat:no-repeat;
}
.text { position:absolute; top:5%; left:5%; width:10%; height:10%;}
.val {
font-family:Myriad Pro;
font-size:47px;
font-weight:bold;
color:#FFF;
text-align:right;
line-height:2em;
margin-top:2%;
width:10%;
}
.type_days {
font-family:Myriad Pro;
color:#ff6565;
width:3%;
text-align:center;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
.type_hours {
font-family: Myriad Pro;
color:#378cff;
width:3%;
text-align:right;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
.type_minutes {
font-family: Myriad Pro;
color:#9cdb7d;
width:3%;
text-align:right;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
.type_seconds {
font-family: Myriad Pro, Arial, Helvetica, sans-serif;
color:#ffdc50;
width:3%;
text-align:right;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
#entergal a {
position:absolute;
text-align:center;
font-size:1em;
line-height:0.0em;
color:#ffffff;
margin-top:0.8em;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-decoration:none;
}
#entergal {
display:block;
position:absolute;
width:7em;
height:1.5em;
bottom:2%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background-color:#39895B;
-moz-box-shadow: 0px 3px 14px #000000;
-webkit-box-shadow: 0px 3px 14px #000000;
box-shadow: 0px 3px 14px #000000;
border-radius:3px;
-moz-border-radius:3px;
}
#social {
position:relative;
width:100%;
height:4em;
background-color:#5E09CB;
margin-top:-1%;
border-top:0.1em solid #000000;
overflow:hidden;
}
.table {
display:table;
margin:0 auto;
}
#social ul {
list-style-type:none;
padding-left:30%;
padding-right:30%;
}
ul#sociallist {
min-width:17em;
list-style:none;
padding-top:none;
}
ul#sociallist li {
display:inline;
}
#foot {
position:relative;
width:100%;
padding-bottom:0.5em;
background-color:#333334;
margin-top:-1%;
border-top:0.1em solid #000000;
overflow:hidden;
}
.tablefoot {
display:table;
margin:0 auto;
}
#foot ul {
list-style-type:none;
padding-left:30%;
padding-right:30%;
}
ul#footnav {
min-width:25em;
padding-top:none;
list-style:none;
padding-left:25%;
}
ul#footnav li {
display:inline;
padding:0.5%;
}
#foot a {
text-decoration:none;
color:#1D88B5;
}
#copy-text p {
text-align:center;
color:#FFFFFF;
font-size:0.5em;
}
#create-text p {
text-align:center;
color:#1D88B5;
font-size:0.25em;
}
The html
<body>
<div id="nav">
<ul>
<li><img src="images/thumb.png" alt="thumb" width="100px" />COMPETE</li>
<li><img src="images/thumb.png" alt="thumb" width="100px" />SCORE</li>
<li><img src="images/thumb.png" alt="thumb" width="100px" />SHOP</li>
<li><img src="images/thumb.png" alt="thumb" width="100px" />MORE</li>
</ul>
</div>
<div class="clear"> </div>
<div id="main">
<div id="logo"> <img src="images/logorz.png" alt="logo" width="180px" /> </div>
<div id="text-left">
<p><strong>Good cause<br />marketplace<br />for limited<br />art-pieces</strong></p>
</div>
<div id="text-right">
<p><strong>... produced by<br />the most<br />creative crowd<br />out there</strong></p>
</div>
<div id="enter"> Enter contest </div>
<img src="images/front-img.png" alt="gallery images" width="100%" />
</div>
<div id="donations">
<div class="meter orange nostripes"> <span style="width:31.99%"></span> </div>
<p><strong>$7.678</strong> of <strong>$24,000</strong> donated this month<br />
This month's donations will help streetdogs in<br />
Bulgaria to find new owners!</p>
<div class="wrapper">
<div class="clock">
<!-- Days -->
<div class="clock_days">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_days" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_days">Days</p>
</div>
</div>
</div>
<!-- Days -->
<!-- Hours -->
<div class="clock_hours">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_hours" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_hours">Hours</p>
</div>
</div>
</div>
<!-- Hours -->
<!-- Minutes -->
<div class="clock_minutes">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_minutes" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_minutes">Minutes</p>
</div>
</div>
</div>
<!-- Minutes -->
<!-- Seconds -->
<div class="clock_seconds">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_seconds" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_seconds">Seconds</p>
</div>
</div>
</div>
<!-- Seconds -->
</div>
More info
</div>
</div>
<div id="gallery">
<div id="gallerytext">
<p>This week's<br />heroes</p>
</div>
<div id="kranz"> <img src="images/kranz.png" alt="kranz" width="310px" /> </div>
<div id="pic1"> <img src="frontgallery/1.jpg" alt="gallery image 1" width="20%" /> </div>
<div id="pic2"> <img src="frontgallery/2.jpg" alt="gallery image 2" width="20%" /> </div>
<div id="pic3"> <img src="frontgallery/3.jpg" alt="gallery image 3" width="20%" /> </div>
<div id="pic4"> <img src="frontgallery/4.jpg" alt="gallery image 4" width="20%" /> </div>
<div id="pic5"> <img src="frontgallery/5.jpg" alt="gallery image 5" width="20%" /> </div>
<div id="pic6"> <img src="frontgallery/6.jpg" alt="gallery image 6" width="25%" /> </div>
<div id="pic7"> <img src="frontgallery/7.jpg" alt="gallery image 7" width="20%" /> </div>
<div id="pic8"> <img src="frontgallery/8.jpg" alt="gallery image 8" width="20%" /> </div>
<div id="pic9"> <img src="frontgallery/9.jpg" alt="gallery image 9" width="20%" /> </div>
<div id="entergal"> Enter contest </div>
</div>
<div id="social">
<div class="table">
<ul id="sociallist">
<li><img src="images/cam.png" alt="camera link" height="40%" /></li>
<li><img src="images/facebook.png" alt="facebook link" height="40%" /></li>
<li><img src="images/twitter.png" alt="twitter link" height="40%" /></li>
<li><img src="images/youtube.png" alt="youtube link" height="40%" /></li>
</ul>
</div>
</div>
<div id="foot">
<div class="tablefoot">
<ul id="footnav">
<li><strong>Compete</strong></li>
<li><strong>Score</strong></li>
<li><strong>Shop</strong></li>
<li><strong>More</strong></li>
</ul>
</div>
<div id="copy-text">
<p><strong>Copyright © 2012 Artwork Heroes, Inc. All photos © their respective owners</strong>
<p>
</div>
<div id="create-text">
<p><strong>Created with Scandinavian love in Copenhagen, Denmark</strong></p>
</div>
</div>
</body>
</html>

Answer 1

If you want to center an absolutely positioned image you can do it like this:
#logo {
position:absolute;
width:200px;
left:50%;
margin-left:-100px;
}
Replace the width with the logos actual width and the negative left margin is half that width.
If you want it centered regarding its parent the parent should be relatively positioned.