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

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

Для этого вы также можете использовать 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>

Answer 4

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

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

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

Answer 5

Обычные 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.

Answer 6

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

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

Answer 7

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

 left: calc(50% - 200px);

Answer 8

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

ширина: calc (ширина: 100% - ширина, вне зависимости от того, что смещено)

Например, если ваша боковая панель навигации - 200px:

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

Answer 9

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

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

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

Answer 10

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

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

child_div {
    /* whatever you want */
}