выравнивание по центру фиксированной позиции div

Я пытаюсь получить div с position:fixedвыровненным центром на моей странице.

Мне всегда удавалось делать это с абсолютно позиционированными div, используя этот "прием"

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

... где значение для margin-left составляет половину ширины div.

Похоже, это не работает для div с фиксированной позицией, вместо этого он просто помещает их в самый левый угол на 50% и игнорирует объявление margin-left.

Есть идеи, как это исправить, чтобы я мог выровнять фиксированные элементы по центру?

И я добавлю бонус M&M, если вы подскажете мне лучший способ центрирования абсолютно позиционированных элементов, чем тот, который я описал выше.

Ответ Коэна точно не центрирует элемент.

Правильный способ - использовать CCS3 transformсобственность. Хотя это не поддерживается в некоторых старых браузерах . И нам даже не нужно устанавливать фиксированное или относительное width.

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

Сравнение рабочего jsfiddle здесь .

Для тех, у кого такая же проблема, но с адаптивным дизайном, вы также можете использовать:

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

Это всегда будет держать вас в divцентре экрана, даже с адаптивным дизайном.

Вы также можете использовать для этого flexbox.

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

Из сообщения выше я думаю, что лучший способ -

1. Есть фиксированный div с width: 100%
2. Внутри div создайте новый статический div с помощью margin-left: autoи margin-right: autoили для таблицы align="center".
3. Тадаааа, теперь вы сосредоточили свой фиксированный div

Надеюсь, это поможет.

Обычные div должны использовать margin-left: autoи margin-right: auto, но это не работает для фиксированных div. Способ обойти это похоже на ответ Эндрю , но не использует устаревшую <center>вещь. По сути, просто дайте фиксированному div оболочку.

#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

Это центрирует фиксированный div внутри div, позволяя div взаимодействовать с браузером. т.е. div будет центрирован, если места достаточно, но будет сталкиваться с краем браузера, если его нет; аналогично тому, как реагирует обычный центрированный div.

Если вы хотите центрировать выравнивание фиксированного положения div как по вертикали, так и по горизонтали, используйте это

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

<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;}

Это должно сделать то же самое.

Если вы знаете, что ширина 400 пикселей, я думаю, это будет самый простой способ сделать это.

 left: calc(50% - 200px);

Это работает, если вы хотите, чтобы элемент занимал всю страницу, как другую панель навигации.

width: calc (width: 100% - ширина всего, что не по центру)

Например, если размер боковой панели навигации составляет 200 пикселей:

ширина: calc (100% - 200 пикселей);

Использовать ширину довольно просто: 70%; слева: 15%;

Устанавливает ширину элемента 70% от окна и оставляет 15% с обеих сторон

Я использовал следующее с Twitter Bootstrap (v3)

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

Т.е. создайте элемент полной ширины, который находится в фиксированном положении, и просто засуньте в него контейнер, контейнер центрируется относительно полной ширины. Должен вести себя нормально и отзывчиво.

Решение с использованием гибкого бокса; полностью отзывчивый:

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

child_div {
    /* whatever you want */
}

если вы не хотите использовать метод оболочки. тогда вы можете сделать это:

.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 */
}