Center aligning a fixed position div

Question

I'm trying to get a div that has position:fixed center aligned on my page.

I've always been able to do it with absolutely positioned divs using this "hack"

left: 50%; 
width: 400px; 
margin-left: -200px;

...where the value for margin-left is half the width of the div.

This doesn't seem to work for fixed position divs, instead it just places them with their left-most corner at 50% and ignores the margin-left declaration.

Any ideas of how to fix this so I can center align fixed positioned elements?

And I'll throw in a bonus M&M if you can tell me a better way to center align absolutely positioned elements than the way I've outlined above.

Efflorescence

Works for me. In all but IE6 (obviously). – Disseisin

@Efflorescence if you could pick an answer it would help other users identify the solution for your issue. – Jamesy

Answer 1

Koen's answer doesn't exactly center the element.

The proper way is to use CSS3 transform property, although it's not supported in some old browsers. We don't even need to set a fixed or relative width.

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

.almost-centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 5%;
    left: 50%;
    padding: 20px;
    margin-left: -20%;
}

.centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 25%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, 0);
}

<div class="almost-centered">
    I'm almost centered DIV lorem ipmsum
</div>

<div class="centered">
    I'm exactly centered DIV using CSS3
</div>

Meeting

Note that if both divs have box-sizing: border-box, there is no difference between this approach and Koen's answer – Rupp

Thanks, @emzero. This works great but how? Why does left: 50%; and the transform do this trick? – Sharmainesharman

@Sharmainesharman left: 50% moves the div to the 50% of the page. But you have to keep in mind that it moves it starting from the left side of the div, therefore the div is not centered yet. translate(-50%, 0) which is basically translateX(-50%) considers the current width of the div and moves it by -50% of its width to the left side from the actual place. – Inglorious

I had a div animating in on render. Had to wrap that in a div with the positioning and transform – Wiper

Answer 2

For the ones having this same problem, but with a responsive design, you can also use:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

Doing this will always keep your fixed div centered on the screen, even with a responsive design.

Citizenship

where do these 37.5% get from? – Maxillary

@Maxillary - it's -1/2 of the position setting (so -(75/2) in this case) – Bartram

Why isn't this the accepted answer is a mystery, it just works (tm) – Phip

+1. However, this no longer works when you give your page a max-width. Then you need to look elsewhere. – Sonnnie

Cropis has a better solution – Nuncio

set the margin-left equal to half of whatever the div's width is – Relapse

This did not work for me unfortunately. emzero's answer below worked. – Jos

work great !, for any one how wont to use this way, 'left: 50%' for any size and the 'margin-left' is width % / 2 – Poohpooh

Answer 3

You could use flexbox for this as well.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

Jamesy

why bother to mention center and align="center"? text-align:center is the way – Supernatural

You should include the text align style into your example. – Blemish

I've altered my answer by removing the mention to <center> which was deprecated and by using a modern technique like the display: flex and some associated properties. – Jamesy

Answer 4

From the post above, I think the best way is

1. Have a fixed div with width: 100%
2. Inside the div, make a new static div with margin-left: auto and margin-right: auto, or for table make it align="center".
3. Tadaaaah, you have centered your fixed div now

Hope this will help.

Tepee

+1 very useful if you need to center a div with fixed width too. E.g. 990px. – Clothesline

This is also the only way I know of to allow max-widths for fixed-position elements. You want a fixed sidebar that responsively takes 30% of your max-width: 1200px web page? This will get you there. – Sonnnie

Answer 5

Center it horizontally:

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%));

Center it horizontally and vertically (if its height is same as width):

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

No side effect: It will not limit element's width when using margins in flexbox

Odometer

This is better than using left: 50%; transform: translate(-50%, 0);, as it avoid showing of a horizontal scrollbar when 50% of centered widget > 50vw on Firefox. – Systematics

Answer 6

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

This should do the same.

Tyrrell

Answer 7

Normal divs should use margin-left: auto and margin-right: auto, but that doesn't work for fixed divs. The way around this is similar to Andrew's answer, but doesn't use the deprecated <center> thing. Basically, just give the fixed div a wrapper.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

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

This will center a fixed div within a div while allowing the div to react with the browser. i.e. The div will be centered if there's enough space, but will collide with the edge of the browser if there isn't; similar to how a regular centered div reacts.

Feria

Answer 8

If you want to center aligning a fixed position div both vertically and horizontally use this

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

Madelinemadella

Answer 9

If you know the width is 400px this would be the easiest way to do it I guess.

 left: calc(50% - 200px);

Stationmaster

Answer 10

You can simply do the following:

div {
  background:pink;
  padding:20px;
  position:fixed;
  
  inset:0;
  margin:auto;
  width: max-content;
  height: max-content;
}

<div>Some content here</div>

Tabor

Answer 11

The conventional approach of .center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } tries to keep some empty space around the centered element which often causes the centered element's width to not be ideal like being smaller than what it should be.

@proseosoc's answer works well in that scenario and extends the centered element's reach to the end of the viewport sides. The centered element, however, gets centered to the entire viewport including the scrollbar. But if your use case requires centering elements within space without the scrollbar, you can use this modified answer. This approach is also similar to the aforementioned conventional approach which centers elements in space without the scrollbar.

Center horizontally

.horizontal-center {
  position: fixed;
  left: calc((50vw - 50%) * -1); /* add negative value equal to half of the scrollbar width if any */
  transform: translate(calc(50vw - 50%));
}

Center vertically

.vertical-center {
  position: fixed;
  top: calc((50vh - 50%) * -1);
  transform: translate(0, calc(50vh - 50%));
}

Center horizontally and vertically

.center {
  position: fixed;
  left: calc((50vw - 50%) * -1);
  top: calc((50vh - 50%) * -1);
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}

Tetter

Answer 12

This works if you want the element to span across the page like another navigation bar.

width: calc (width: 100% - width whatever else is off centering it)

For example if your side navigation bar is 200px:

width: calc(100% - 200px);

Deckard

Answer 13

To center a position fixed element you can use the following CSS:

.fixed-elem {
    position: fixed;
    background-color: brown;
    height: 100px; /* adjust as you want */
    width: 100px; /* adjust as you want */
    
    /* Center */
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
}

<html lang="en">
<body>
    <div class="fixed-elem"></div>
</body>
</html>

Wayland

Answer 14

It is quite easy using width: 70%; left:15%;

Sets the element width to 70% of the window and leaves 15% on both sides

Niemeyer

Answer 15

I used the following with Twitter Bootstrap (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

I.e make a full width element that is fixed position, and just shove a container in it, the container is centered relative to the full width. Should behave ok responsively too.

Demicanton

Answer 16

I always prefer using margin: auto when centering divs.

For an element that has position: fixed, if you specify top:0, right:0, bottom:0, left:0, you can use margin:auto and that works.

#fixed_div {
    /* Setup */
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
    position: fixed;

    /* Centering div */
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    margin-left: auto;
    margin-right: auto;


}

<p>
I am a body of text that will be beneath the fixed div. Forever and forever. It is unfortunately my destiny to be this low-lying text that no one cares about. Sometimes, I wonder why I was brought into this world. 
</p>
 <div id="fixed_div"></div>

Kickoff

Answer 17

A solution using flex box; fully responsive:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

Sexless

Answer 18

I want to share answer that have centered div, centered text content AND explicit width and height. If you don't care about sizing you may take a look to padding solution by Temani Afif.

.fixed-centered {
  /* content position */
  display: flex;
  justify-content: center;
  align-items: center;

  /* div position */
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* visual styling */
  width: 300px;
  height: calc(100% - 50px);
  background: lightgreen;
}

<div class="fixed-centered">Fixed centered div</div>

<p>
  Eius tempora sequi voluptatem enim corporis veritatis. Et quis praesentium dolorem nobis. Rerum voluptatibus fugit asperiores autem. Quod et quaerat quasi asperiores. Voluptates incidunt et ea quia neque cupiditate. Corrupti non et sit quae quo officia
  eos aliquid.
</p>

Dehydrogenase

Answer 19

if you don't want to use the wrapper method. then you can do this:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}

Destructible