Reputation: 44413

CSS horizontal centering of a fixed div?

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

I know this question is a million times out there, however I can't find a solution to my case. I've got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen!

The div should have 500px width, should be 30px away from the top (margin-top), should be horizontally centered in the middle of the page for all browser sizes and should not move when scrolling the rest of the page.

Is that possible?

Upvotes: 256

Answers (11)

Imad Che

Reputation: 39

You can just use horizontal-align { margin-inline-start: auto; margin-inline-end: auto; } this will center the element exactally at center

Upvotes: -1

Gregg Od

Reputation: 145

The best way to do this is have the fixed div and then have a div inside of it that you center. This is most useful when you want a fixed container so the fixed elements do not go outside of the containers width.

<div class="fixed">
  <div class="container">
   <div class="toast">A notification that shows up</div>
  </div>
</div>

.fixed {
 position: fixed;
 top: 32px;
 left: 0;
 right: 0;
 pointer-events: none; // so this div does block clicks on content underneath it
}

.container {
 max-width: 1200px;
 width: 100%;
 margin: 0 auto;
}

.toast {
 pointer-events: all; // so you can click on the toast to close it
}

Upvotes: 1

malisuslu

Reputation: 9

div {
   left: calc((100vw - 100%) / 2);
}

Upvotes: -1

Quentin

Reputation: 944530

left: 50%;
margin-left: -400px; /* Half of the width */

Upvotes: 170

Vien Tang

Reputation: 603

Here's a flexbox solution when using a full screen wrapper div. justify-content centers it's child div horizontally and align-items centers it vertically.

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}

Upvotes: -1

Nick Rice

Reputation: 1233

Edit September 2016: Although it's nice to still get an occasional up-vote for this, because the world has moved on, I'd now go with the answer that uses transform (and which has a ton of upvotes). I wouldn't do it this way any more.

Another way not to have to calculate a margin or need a sub-container:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

Upvotes: 40

Maciej Kravchyk

Reputation: 16727

The answers here are outdated. Now you can easily use a CSS3 transform without hardcoding a margin. This works on all elements, including elements with no width or dynamic width.

Horizontal center:

left: 50%;
transform: translateX(-50%);

Vertical center:

top: 50%;
transform: translateY(-50%);

Both horizontal and vertical:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Compatibility is not an issue: http://caniuse.com/#feat=transforms2d

Upvotes: 801

Anonymous

Reputation: 61

Here's another two-div solution. Tried to keep it concise and not hardcoded. First, the expectable html:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

The principle behind the following css is to position some side of "outer", then use the fact that it assumes the size of "inner" to relatively shift the latter.

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

This approach is similar to Quentin's, but inner can be of variable size.

Upvotes: 6

Denis V

Reputation: 3390

It is possible to horisontally center the div this way:

html:

<div class="container">
    <div class="inner">content</div>
</div>

css:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

Using this way you will have always your inner block centered, in addition it can be easily turned to true responsive (in the example it will be just fluid on smaller screens), therefore no limitation in as in the question example and in the chosen answer.

Upvotes: 11

salomvary

Reputation: 1150

If using inline-blocks is an option I would recommend this approach:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
}

I wrote a short post on this here: http://salomvary.github.com/position-fixed-horizontally-centered.html

Upvotes: 62

Meduza

Reputation: 542

... or you can wrap you menu div in another:

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

Upvotes: 5

CSS horizontal centering of a fixed div?

Answers (11)

Related Questions