Center Aligning a Fixed Position Div

Center a position:fixed element

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

Thus, provided a <!DOCTYPE html> (standards mode), this should do:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

How to center elements in a fixed position element

No need for inner elements, you can use pseudo elements for this. For the centering, I use one of the most common and robust centering methods:

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

along with a positioned parent.

Here's what it looks like:

.note-add {
  position: fixed;
  background: rgb(189, 28, 175);
  width: 75px;
  height: 75px;
  bottom: 0;
  right: 50%;
  border-radius: 50%;
  margin-bottom: 30px;
}

.note-add::before,
.note-add::after {
  content: "";
  position: absolute;
  background: red;
  width: 30px;
  height: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.note-add::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

<div class="note-add"></div>

How do I horizontally center a fixed div while having the width fit the content inside

Remove margin-left in code.

Set transform and left for horizontally center.

Modify width to 100%.

.tab {
    overflow: hidden;
    background-color: #505050;
    padding: 0;
    width: 100%;
    border-radius: 15px;
    position: fixed;
    top: 0;
    z-index: 10;
    transform: translateX(-50%);
    left: 50%;
}

CSS horizontal centering of a fixed div?

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

center a div inside a fixed one at the center of the screen

There are two ways you can achieve this. One is to give your #center div a fixed position:

#center {
    position:fixed; /* change this to fixed */
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background:#fff;
}

However, this will keep it centered to the screen and not the page.

If you want to center it vertically and horizontally on the web page, one option is to use flex:

#container {  display: flex;  /* establish flex container */  flex-direction: column;  /* make main-axis vertical */  justify-content: center;  /* align items vertically, in this case */  align-items: center;  /* align items horizontally, in this case */  height: 500px;  /* for demo purposes */  border: 1px solid black;  /* for demo purposes */  background-color: #eee;  /* for demo purposes */}
.box {  width: 300px;  margin: 5px;  text-align: center;}
#center {  background: #fff;  width:100px;  height:100px;}

<div id="container">  <!-- flex container -->
  <div id="center" class="box">    how to center this div?  </div>
</div>