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


127

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

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

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

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

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

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

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


Работает для меня. Во всем, кроме IE6 (очевидно).
bob

@Kyle, если бы вы могли выбрать ответ, это помогло бы другим пользователям найти решение вашей проблемы.
andreihondrari

Ответы:


202

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

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

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

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


1
это идеально. Я использовал это для приложения cordova, и ожидается, что оно будет работать в основных обновленных браузерах :)
saurabh

2
Очень просто, но совершенно полезно. Спасибо.
Жилберто Санчес

Вау, спасибо! Я пытался центрировать текст между двумя неровными div, и это единственный, который работает, не разрушая разметку!
Андрей Каипов

4
Настоящий ответ +1
sn3ll

3
@Alex left: 50%перемещает div на 50% страницы. Но вы должны иметь в виду, что он перемещает его, начиная с левой стороны div, поэтому div еще не центрирован. translate(-50%, 0)который в основном translateX(-50%)учитывает текущую ширину div и перемещает его на -50% от его ширины влево от фактического места.
emil.c

168

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

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

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


2
Это помогло мне с проектом RWD :)
tctc91

6
откуда берутся эти 37,5%?
Аврора

7
@aurora - это -1/2 настройки позиции (так -(75/2)в данном случае)
Inaimathi

1
Почему это не принятый ответ - загадка, он просто работает (tm)
CGK

2
У Cropis есть лучшее решение
Арнальдо Капо

44

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


12
зачем вообще упоминать center и align = "center"? text-align: center is the way
wlf

1
Вы должны включить стиль выравнивания текста в свой пример.
Manatax

Спасибо вам большое! Это мне очень помогло!
Joan.bdm

Я изменил свой ответ, удалив упоминание, <center>которое было объявлено устаревшим, и использовал современный метод, такой как display: flexи некоторые связанные свойства.
andreihondrari

33

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

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

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


2
+1 очень полезно, если вам нужно центрировать div с фиксированной шириной. Например, 990 пикселей.
dcernahoschi

Это также единственный известный мне способ разрешить max-widths для элементов с фиксированным положением. Вам нужна фиксированная боковая панель, которая занимает 30% вашей max-width: 1200pxвеб-страницы? Это доставит вас туда.
Майкл

7

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


4

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

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

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

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


3

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

 left: calc(50% - 200px);

2

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

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

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

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


1

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

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


1

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

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

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


0

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

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

child_div {
    /* whatever you want */
}

-1

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

.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 */
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.