Position: Absolute; (Centered)

It’s pretty easy to center a relatively positioned div:

#div { position: relative; margin: 0 auto; }

However, sometimes centering a div that has an absolute position can be a little tricky. Here’s a workaround that I’ve been using that seems to get the job done. Say you have a logo that you want to center in your header and it has a position that is absolute, sort of like the following example:

<div id="body">
<div id="header">
<div id="logo"> logo </div>
</div>
<div id="maincontent"> main content</div>
<div id="footer"> footer </div>
</div>

Basically, what you can do is give the div #logo a value of left: 50%. The first thing you’ll notice is that the div doesn’t appear to be perfectly centered. Well, that’s because it’s not. It’s simply starting at the halfway point in your screen. To center the div you’ll need to make sure there is a clarified width. Then, take the width and divide it by 2 (round to even number). The result of half your width is what you will set your margin-left to in a negative value. Here’s a quick example:

#logo { position: absolute; width: 108px; left: 50%; margin-left: -54px; }

And that should just about do it. If you have an alternate, or better way of accomplishing absolute centered, leave a comment!

Nick Winters

Nick performs web marketing and design for Wenatchee Valley College. In his spare time, he takes on freelance projects and fun creative opportunities via Pixel to Press.

Leave a Comment





pixel-flag-white-10

MAKE EM LIKE THEY USED TO

HANDCRAFTED LOGOSSTRATEGIC BRANDINGCUSTOM WEBSITESSOCIAL MEDIA MARKETINGSEARCH ENGINE OPTIMIZATIONPRINT & PACKAGINGDOPE DESIGNSRAD WEARGOODS & SUPPLY

PROJECT INQUIRY

Project Inquiry

  • This field is for validation purposes and should be left unchanged.

© PIXEL TO PRESS, LLC 2020. ALL RIGHTS RESERVED.