Выравнивание по центру фиксированного положения div

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

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

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

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

Это не работает для фиксированных позиционных divs, вместо этого он просто помещает их с самым левым углом в 50% и игнорирует декларацию по левому краю.

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 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>

Ответ 4

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

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

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

Ответ 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

Ответ 6

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

 left: calc(50% - 200px);

Ответ 7

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

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

Ответ 8

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

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

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

width: calc (100% - 200px);

Ответ 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>

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

Ответ 10

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

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

Ответ 11

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

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

child_div {
    /* whatever you want */
}

Ответ 12

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

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

Ответ 13

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

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