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

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

Я всегда был в состоянии сделать это с абсолютно позиционируемых дивами с помощью этого «взломать»

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

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

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

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

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

источник

2010-05-18 Kyle

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

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

СМЧ будет:

#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 = «центр» свойства применяется. Вы могли бы даже выровнять выровненный и использовать text-align: center.

источник

2012-04-13 20:09:25

+12

Почему бы не упомянуть центр и выровнять = "центр"? text-align: center - это путь – wlf

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

Большое вам спасибо! Это действительно помогло мне! –

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

имеют фиксированный DIV с width: 100%
Внутри DIV, сделать новый статический DIV с margin-left: auto и margin-right: auto, или за столом делают его align="center" ,
Tadaaaah, вы сосредоточены вашим фиксированным Див теперь

Надеется, что это поможет.

источник

2012-05-17 00:05:42 Bhimbim

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

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

Это работает только с ребенком известной ширины. – MarsAndBack

144

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

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

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

источник

2012-05-17 14:58:21 Koen

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

Приятно слышать, что :) – Koen

, откуда эти 37,5%? – aurora

Очень легко использовать ширина: 70%; левый: 15%;

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

источник

2013-12-13 03:30:13 maria

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

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

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

источник

2014-01-27 14:09:56

Обычные divs должны использовать margin-left: auto и margin-right: auto, но это не работает для фиксированных div. Путь вокруг этого похож на Andrew's answer, но не использует устаревшую вещь <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.

источник

2014-04-15 03:52:24 Kevin

111

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

Правильный способ использования CCS3 transform. Хотя это not supported in some old browsers. И нам даже не нужно устанавливать фиксированный или относительный номер width.

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

Рабочее сравнение jsfiddle here.

источник

2014-09-18 17:41:20 emzero

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

Очень простой, но абсолютно полезный. Спасибо. –

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

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

left: calc(50% - 200px);

источник

2016-11-09 12:52:08 Daut

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

ширин: известково (ширина: 100% - ширина всего остального выключена центрированная)

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

ширина: известково (100% - 200px);

источник

2017-01-07 17:01:42

-1

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

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

источник

2017-09-16 19:53:59

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

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

child_div { 
    /* whatever you want */ 
}

источник

2018-03-08 00:30:17 MarsAndBack

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

ответ

Смежные вопросы