Grow your CSS skills. Land your dream job.

Position Logo In Exact Center Of Screen?

  • # May 23, 2009 at 7:14 pm

    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.

    # May 23, 2009 at 8:43 pm

    HTML

    Code:

    CSS

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

    OR…

    You can just use plain HTML…

    HTML

    Code:


    # May 23, 2009 at 9:57 pm

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

    Code:

    logo

    …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:

    logo

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

    # May 23, 2009 at 10:15 pm
    "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:

    logo

    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…

    # May 23, 2009 at 10:45 pm

    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?

    # May 24, 2009 at 1:35 am

    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. */
    }

    # May 30, 2013 at 2:47 am

    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”)

    # May 30, 2013 at 3:09 am

    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)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".