I have a simple, temporary page with a logo. I want to simply center it both vertically and horizontally. Actually, I want it a bit higher than center.
I am looking for a pure CSS solution.
6 answers
points
Here is the screen centered (horizontal and verical) cross browser solution.
div#centered {
height: 300px;
margin-top: -150px; /* exactly
points
I've got my own answer...
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0;
color: white; text-align: center; }
div#centered { border: 0; background-color: white; height: 50%; width: 50%;
position: absolute; left: 25%; top: 25%; color: black; }
</style>
I found this in some old notes but i can't find which website i found it on. there were many proposed options online but this was simplest and just works. Litmus app confirm it works consistently.
But perhaps more content on the page would create issues.
points
Similar solution but using negative margin to pull the content back up - may allow for more flexible positioning but relies on knowing the height of the content block.
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
color: white;
text-align: center;
}
div#centered {
border: 0;
background-color: white;
height: 300px;
margin-top: -200px;
width: 100%;
position: absolute;
left: 0%;
top: 50%;
color: black;
}
</style>
point
Here's my favourite and least code solution:
<html>
<body style="background: url(logo.gif) center center no-repeat; ">
</body>
</html>
see it here: http://www.boldfishclient.co.uk/mango/
- nice but does not allow for assigning links to images in the div. Also, with other methods you can have text in the div.
- yes, but the question and example referred to an image. why is this downmarked?
- Tony is right, his answer is pure CSS, and works brilliantly for a simple image. If you wanted links, then you should have specified in the question in the first place. No reason to down-mark this answer. +1
points
Here's my answer:
.center {text-align:center; width:100%; position: fixed; top: 50%; right:0;margin: -200px 0 0 0;}
.container {width: 960px; margin:0 auto; position:relative;}
.content {width:960px; background-color:yellow; height:400px;}
<div class="center">
<div class="container">
<div class="content">
</div>
</div>
</div>
Replace 960px with the width of the content, and change -200px to be half of the height of the content, but with a - sign in front of it.
points
Here's what you can do:
.mydiv {
width: [amount]px;
height: [amount]px;
background-image: url(location of your image);
margin: auto;
padding-top: [however far down you want it]px;
}
Another option instead of padding-top is margin-top.
If none of those work, you could always make another div above your logo like this:
.padder {
padding-top: [however far down you want];
}
And again, if that doesn't work, try margin-top instead of padding-top.
And also to center it, try using <div align="center">, sometimes the margin: auto doesnt work in IE. I hope this helps!
