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

14
points

Here is the screen centered (horizontal and verical) cross browser solution.

div#centered {
    height: 300px;
    margin-top: -150px; /*  exactly 
Answered over 7 years ago by Multiple-media.com
6
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.

Answered over 7 years ago by helloari
3
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>
Answered over 7 years ago by Alan Wallace
2
points

Here's my favourite and least code solution:

<html>
    <body style="background: url(logo.gif) center center no-repeat; ">
        &nbsp;
    </body>
</html>

see it here: http://www.boldfishclient.co.uk/mango/

Answered over 7 years ago by Tony Crockford
  • nice but does not allow for assigning links to images in the div. Also, with other methods you can have text in the div. helloari over 7 years ago
  • yes, but the question and example referred to an image. why is this downmarked? Tony Crockford over 7 years ago
  • 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 Abinadi Ayerdis about 7 years ago
-2
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.

Answered over 7 years ago by Jake Mates
-4
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!

Answered over 7 years ago by Liam DeBeasi