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

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

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

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

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

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

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

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

77
19 мая '10 в 0:22
источник поделиться
10 ответов

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

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

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

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

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

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

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

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

105
18 сент. '14 в 20:41
источник

Хорошим способом центрировать "фиксированный" элемент было бы сделать "центральный" элемент фиксированным и со 100% шириной, и все в нем будет находиться в центре 100% -ной ширины "центра".

css будет:

#center{
    position:fixed;
    width: 100%; //this basically stretches all over the window as fixed
}

html:

<html><head></head>
<body>
    <center id='center'>
        ...elements
    </center>
</body></html>

Тот же метод может применяться к абсолютному позиционированию элементов.

UPDATE: И для скептиков, которые считают центральную метку устаревшей, ее можно заменить на обертку div, которая имеет свойство align = "center". Вы даже можете удалить выравнивание и использовать text-align: center.

27
13 апр. '12 в 23:09
источник

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

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

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

25
17 мая '12 в 3:05
источник

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

Html:

<div id="wrapper">
    <div id="fixed_div"></div>
</div

Css:

#wrapper {
    width: 100%;
    position: fixed;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    text-align: center;
}

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

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

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

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

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

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

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

width: calc (100% - 200px);

1
07 янв. '17 в 20: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 в 17:09
источник

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

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

0
13 дек. '13 в 6:30
источник

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

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

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