Position Logo In Exact Center Of Screen?

[Eraser35]

How can I position my logo to the exact center of the screen?

I would like the logo to be able to scale (slide) in the event the browser window is resized.

Regards.

[AshtonSanders]

HTML

Code:

CSS

Code:

#header { text-align: center }
#logo {margin: 0 auto;}

OR…

You can just use plain HTML…

HTML

Code:

[Eraser35]

So I decided to use this code to position my logo:

Code:

…the above code did in fact place my logo correctly on the y-axis (vertically logo is in the middle of the screen); however the logo’s x-axis is budged up against my navigation bar. Just for testing purposes, I tried embedding some padding to see if I could move the logo down, and it worked:

Code:

I would like a more precise method of achieving the absolute center for the x-axis. Any suggestions?

[AshtonSanders]

"Eraser35" wrote:

…the above code did in fact place my logo correctly on the y-axis (vertically logo is in the middle of the screen);

Really? I’m pretty sure <center> only works horizontally.

"Eraser35" wrote:

however the logo’s x-axis is budged up against my navigation bar. Just for testing purposes,
<snip>
Any suggestions?

Code:

Btw, the only real way I know of centering things vertically is making a table cell with valign=middle, and give it 100% height and width… I don’t think that will work for resizing though…

[Eraser35]

Oops! I’m an idiot! I meant to say it positioned my logo on the X-axis correctly. The Y-axis is messed up.

Does this change anything regarding a suggestion?

[MaxBlack]

Does your header have a fixed height? If so, you could do that :

let’s say your logo is 200px x 100px and the height of your header is 200px.

Code:

Code:

#header {
overflow: auto;
height: 200px;
}

#header img {
float: left;
position: relative;
left: 50%;
top: 50%
margin-left: -100px /* Half the width of your image. IE6 will double this measure because it is floated. */
margin-top: -50px /* Half the height of your image. IE6 will double this measure because it is floated. */
}

[georgebrown]

Use the center tag or mark the dimensions of your screen calculate it and find out the center.

[Cheap Logos Design](http://www.cheaplogosdesign.com/ “Cheap Logos Design”)

[BaliBalo]

A good trick for centering using pseudo-elements of the parent:
(assuming #element is what you want to center in its parent and #parent its parent)

#parent
{
text-align: center;
}
#parent::before
{
content: ”;
display: inline-block;
height: 100%;
vertical-align: middle;
}
#element
{
vertical-align: middle;
}

A few remarks:
– Don’t forget to put html and body height to 100% if you don’t have enough content to cover the window.
– It only works on browsers that support pseudo-elements (any modern browser)

[Author]

Posts