Koen's solution doesn't completely center the element.

The more effective approach involves utilizing the CSS3 transform property, even though its compatibility may be limited in certain outdated browsers. This method eliminates the necessity of defining 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">
    Almost centered DIV with lorem ipmsum
</div>

<div class="centered">
    Perfectly centered DIV achieved with CSS3
</div>

If you're encountering a similar issue but with a responsive layout, there's another solution you can implement:

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

By following these steps, you can ensure that your fixed div remains centered on the screen, even when using a responsive design.

Flexbox can be utilized for achieving the same result.

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* Using flexbox to center the element in the fixed container */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* vertical alignment */
  align-items: center; /* horizontal alignment */
  
  /* Styling for visualization */
  border: 2px dashed red;
  box-sizing: border-box;
}

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

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

<div class="container">
  <div class="item">Your element</div>
</div>

After reading the previous response, in my opinion, the most effective method would be:

1. Create a div with a fixed width of 100%
2. Within the div, insert a new div with margin-left: auto and margin-right: auto, or for tables, use align="center".
3. Voilà! Your fixed div is now centered.

I hope this suggestion proves to be useful.

Horizontally center align:

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

Both horizontally and vertically center align (if height equals width):

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

No impact on width: Margins in flexbox won't constrain element's width

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

  </div>
</div>

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

This code snippet achieves the same result.

When it comes to fixed divs, the usual margin-left: auto and margin-right: auto approach for centering doesn't work. However, there's a workaround that doesn't involve the outdated <center> tag. What you can do is give the fixed div a wrapping element.

#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 method will effectively center a fixed div within another div, while maintaining responsiveness. The fixed div will be centered if there's enough space, but will align with the edge of the browser if space is limited, similar to how a regularly centered div would behave.

To achieve center alignment both vertically and horizontally for a fixed position div, apply the following CSS:

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

One way to handle a width of 400px is by using the following method, I suppose.

 left: calc(50% - 200px);

To achieve this effect, try the following method:

<style>
  div {
    background: purple;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div>Your content goes here</div>

When it comes to centering elements, the traditional method of using

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

@proseosoc's solution addresses this issue by extending the centered element to the edges of the viewport, ensuring that it takes up the entire available space. However, this method includes the scrollbar in its centering calculation. If you need to center elements within the viewport excluding the scrollbar, you can use the modified solution provided here. This alternative method aligns elements in the viewport without accounting for the scrollbar, similar to the traditional approach.

Horizontal Centering

.horizontal-center {
  position: fixed;
  left: calc((50vw - 50%) * -1); /* adjust with a negative value equivalent to half of the scrollbar width, if applicable */
  transform: translate(calc(50vw - 50%));
}

Vertical Centering

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

Horizontal and Vertical Centering

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

One way to center a position fixed element is by using the CSS code below:

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

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

If you're looking to have the element cover the entire width of the page similar to a navigation bar.

Use the following CSS code:

width: calc(100% - 200px);

With just a few simple lines of code, you can achieve the desired effect: width: 70%; left:15%;

This code snippet sets the element's width to 70% of the window while leaving 15% of space on both sides.

When working with Twitter Bootstrap version 3, I utilized the following code snippet:

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Incorporating elements like rows and columns.</p>
    </div>
</footer>

This code snippet creates a full-width element with a fixed position, housing a centered container inside it. The layout should respond well to different screen sizes as well.

My preferred method for centering divs is always using margin: auto.

When dealing with an element that has position: fixed, setting top:0, right:0, bottom:0, left:0 allows using margin:auto effectively.

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

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

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

<p>
I am the text below the fixed div. My existence lies in being this unimportant text that nobody pays attention to. At times, I question my purpose in this world.
</p>
 <div id="fixed_div"></div>

An example that utilizes flexbox for a fully responsive design:

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

.item {
    /* Add your styles here */
}

Sharing a centered div with text content, along with explicit width and height. For those unconcerned with sizing, a padding solution by Temani Afif may be of interest.

.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>