A little dab'll do ya
Code Snippets
CSS background-image Technique:
html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
CSS + Inline Image Technique:
img {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Table technique:
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="logo.png" alt="" /></td>
</tr>
</table>
</body>
</html>
It’s also possible to do it using div’s and CSS without using px sizes or tables:
<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; display: table">
<div class="contendor-secundario" style="border: 1px solid yellow; margin: 0; padding: 0; display: table-row">
<div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; vertical-align: middle; display: table-cell">columna uno</div>
<div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; display: table-cell">columna dos,
la cual es bastante
más alta que la anterior,
y además la podemos hacer
todavía más alta
y la columna 1 ya no se centra</div>
</div>
</div>
It’s explained here, but in spanish :(
explination using google page translator.
This is called “The dead center”, or am I wrong?
It’s explained in English here:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Why does everyone in the universe write background shorthand wrong?
This is the correct way and the only way that works in ALL browsers that support background shorthand:
background: #FFF url() repeat fixed left top;
/rant
thanks, i agree with you, WHY
Craig, syntactically, you can have your properties in any arrangement:
background: #fff url() fixed left top;
is essentially the same as
background: url() fixed 0 0 #fff;
either way you look at it, it’s doing the same exact thing.
Thanks. This helped me a lot.
Brillant!!
/* logo */
.logo {
position: absolute;
top: 50%;
left: 50%;
width: 828px;
height: 104px;
margin-top: -52px; /* Half the height */
margin-left: -414px; /* Half the width */
}