центр вирівнювання фіксованого положення діл

Я намагаюся знайти діва, який position:fixedвирівняв центр на моїй сторінці.

Мені завжди вдавалося це робити з абсолютно розташованими дивами, використовуючи цей "хак"

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

... де значення для поля вліво становить половину ширини діва.

Схоже, це не працює для дівок з фіксованою позицією, натомість вони просто розміщують їх у самому лівому куті на 50% та ігнорують декларацію зліва від поля.

Будь-які ідеї, як це виправити, щоб я міг по центру вирівняти нерухомі розміщені елементи?

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

Відповідь Коена не є точно центром елемента.

Правильний спосіб - використовувати CCS3 transformмайно. Хоча це не підтримується в деяких старих браузерах . І нам навіть не потрібно встановлювати фіксовану чи родичу width.

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

Робота jsfiddle порівняння тут .

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

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

Це завжди буде тримати ваш фіксований divцентр на екрані, навіть при чуйному дизайні.

Для цього можна використовувати і флешбокс.

.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>

З поста вище, я думаю, що найкращий спосіб

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

Сподіваюсь, це допоможе.

Звичайні діви повинні використовувати margin-left: autoі margin-right: auto, але це не працює для фіксованих дівок. Шлях до цього подібний до відповіді Ендрю , але не використовує застарілу <center>річ. В основному, просто дайте закріпленому діву обгортку.

#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 буде по центру, якщо буде достатньо місця, але він зіткнеться з краєм браузера, якщо його немає; подібно до того, як реагує звичайний центрирован дів

Якщо ви хочете в центрі вирівнювання фіксованого положення ділити як вертикально, так і горизонтально, використовуйте це

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

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

Це має робити те саме.

Якщо ви знаєте, що ширина - 400 пікселів, це було б найпростішим способом зробити це.

 left: calc(50% - 200px);

Це працює, якщо ви хочете, щоб елемент переходив на сторінку, як інша панель навігації.

ширина: кальц (ширина: 100% - ширина, все інше не від центру)

Наприклад, якщо ваша бічна панель навігації становить 200 пікселів:

ширина: обчислення (100% - 200 пікс.);

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

Встановлює ширину елемента на 70% вікна і залишає 15% з обох сторін

Я використовував наступне з Twitter Bootstrap (v3)

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

Тобто зробіть елемент повної ширини, який є фіксованим положенням, і просто засуньте контейнер у нього, контейнер розташований по центру відносно повної ширини. Слід поводитись також добре чуйно.

Рішення з використанням флексу; повністю чуйний:

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

child_div {
    /* whatever you want */
}

якщо ви не хочете використовувати метод обгортки. тоді ви можете це зробити:

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