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

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

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

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

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

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

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

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

+103
18 мая '10 в 21:22
источник поделиться
13 ответов

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

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

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

+159
17 мая '12 в 14:58
источник

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

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

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

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

+157
18 сент. '14 в 17:41
источник

Вы также можете использовать 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>
+32
13 апр. '12 в 20:09
источник

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

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

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

+28
17 мая '12 в 0:05
источник

Нормальные 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.

+7
15 апр. '14 в 3:52
источник

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

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
+3
16 сент. '17 в 19:53
источник

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

 left: calc(50% - 200px);
+3
09 нояб. '16 в 12:52
источник

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

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

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

width: calc (100% - 200px);

+2
07 янв. '17 в 17:01
источник

Я использовал следующее с 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. сделаем элемент полной ширины, который является фиксированным положением, и просто засуньте в него контейнер, контейнер центрирован относительно полной ширины. Должно также вести себя нормально.

+1
27 янв. '14 в 14:09
источник

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

.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 */
}
0
08 июл. '19 в 16:23
источник

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

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

0
13 дек. '13 в 3:30
источник
<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;}

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

0
12 июл. '19 в 12:10
источник

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

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

child_div {
    /* whatever you want */
}
0
08 мар. '18 в 0:30
источник

Посмотрите другие вопросы по меткам или Задайте вопрос