Центруйте положення: фіксований елемент

439

Я хотів би зробити position: fixed;спливаюче вікно, зосереджене на екрані, з динамічною шириною та висотою. Я margin: 5% auto;для цього використовував . Без position: fixed;нього центрировать тонко горизонтально, але не вертикально. Після додавання position: fixed;він навіть не центрується горизонтально.

Ось повний набір:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}

<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

Розгорніть фрагмент

Як центрувати це поле на екрані за допомогою CSS?

css css-position centering

— saturngod
джерело

606

В основному вам потрібно встановити topі leftпо 50%центру лівий верхній кут діла. Вам також потрібно встановити на margin-topта margin-leftвід’ємну половину висоти та ширини діва, щоб зрушити центр до середини діва.

Таким чином, за умови <!DOCTYPE html>(стандартного режиму) це слід:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Або якщо вам не байдуже центрувати вертикально і старі браузери, такі як IE6 / 7, ви можете замість цього додати left: 0і right: 0до елемента, що має a margin-leftі margin-rightof auto, так що фіксований розміщений елемент, що має фіксовану ширину, знає, де його ліворуч і правові компенсації починаються. У вашому випадку таким чином:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Знову ж таки, це працює лише в IE8 +, якщо ви дбаєте про IE, і це центри лише горизонтально, а не вертикально.

— BalusC
джерело

8

Я знайшов цю хитрість у css-tricks.com/… . Але коли я змінюю ширину та висоту, це центр не рухається. Так, мені слід змінити край ліворуч і верх, коли змінити висоту та ширину.

— Saturngod

2

FYI: це буде правильно розміщувати речі посередині, але, на жаль, ви втрачаєте смуги прокрутки - будь-який вміст, відсічений у вікні перегляду, не буде доступний, навіть якщо ви прокручуєте, оскільки фіксована позиція базується на вікні перегляду, а не на сторінки. Поки що єдине рішення, яке я знайшов, - це JavaScript.

— Groxx

3

Groxx Я думаю, що ви можете помістити смуги прокрутки всередині div у спливаючому вікні, використовуючи властивість переповнення .

— Девід Віньєцький

1

Крім того, для цього потрібно знати ширину елемента.

— Гектор Ордонез

2

ах. нм, якщо це так, я маю на увазі, звичайно, розмір браузера буде динамічним, не впевнений, чому це було в питанні. натомість я думав, що він мав на увазі, що розміри спливаючих вікон повинні бути динамічними. ось так для мене, так що я використовую перетворення: translate (-50%, -50%); працює чудово, за винятком випадків, коли не на IE8.

— ночі

324

Я хочу зробити спливаюче вікно, зосереджене на екрані з динамічною шириною та висотою.

Ось сучасний підхід до горизонтального центрування елемента з динамічною шириною - він працює у всіх сучасних браузерах; підтримку можна побачити тут .

Оновлений приклад

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Для вертикального та горизонтального центрування ви можете використовувати наступне:

Оновлений приклад

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

Ви можете також додати ще власні властивості з префіксом постачальника (див. Приклади).

— Джош Крозьє
джерело

1

Я використовую цей підхід для горизонтального центрування фіксованого розміщеного зображення, ширина якого більша за ширину вікна і працює в точності як мінімум у поточних версіях Firefox, Chrome, IE 11 та Edge.

— Джельхан

1

У моєму тестуванні це працює дуже добре (за префіксами), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4+ Chrome. Єдиним невдачею для мене був Android 4.0, де переклад не відбувся.

— danjah

2

@ahnbizcad, це працює в настільних браузерах, як Chrome 61, Safari 11 і FireFox 65, але не в Chrome 61 на Android 6, прийнята відповідь працює у всіх браузерах.

— Ерік Барке

5

Це робить зображення розмитими в Chrome.

— Томаш П. Шинальський

1

Якось тільки підхід, який працював належним чином у всіх браузерах з моїм img. Дякую купу!

— Kugelfisch

136

Або просто додати left: 0і right: 0до Вашого оригінального CSS, що робить його вести себе так само , як звичайний нефіксованим елемент і звичайних авто рентабельності техніки роботу:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Зауважте, що вам потрібно використовувати дійсний (X) HTML-код, DOCTYPEщоб він нормально поводився в IE (що, звичайно, ви повинні мати у будь-якому випадку!)

— Буде Прескотт
джерело

2

В якому сенсі? Батьківський елемент - це тіло, яке не має меж. Якщо ви додали властивості кордону до тіла (?!), То впевнені, що це вплине, як і техніка на 50%, яку я собі уявляю. Запевняю, він працює чудово із заданими параметрами, просто перевірений у кожному зручному браузері і має додаткову перевагу від того, щоб не залежати від ширини елемента.

— Вілл Прескотт

5

Все, що я зробив, було додати ці 2 властивості та доктіп до прикладу HTML ОП. Однак при подальшому тестуванні здається, що проблема IE7 (або 8 у режимі compat) - здається, вона не поважає значення rightвластивості, якщо leftвона також встановлена! ( msdn.microsoft.com/en-us/library/… зазначає, що leftта має rightлише "часткову" підтримку в IE7). Гаразд, я визнаю, що це рішення не є корисним, якщо підтримка IE7 важлива, але чудовий трюк, який слід пам’ятати на майбутнє :)

— Буде Прескотт

7

це має бути прийнятою відповіддю. У мене було два фіксованих положення - одне для маски непрозорості, інше - для модального. це був єдиний спосіб, коли я міг зосередити модаль фіксованого положення в центрі екрана. Дивовижна відповідь, хто б міг подумати?

— Кріс Хоукс

3

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

— Гектор Ордонез

7

Я б запропонував спростити відповідь, оскільки частина css стосується лише ОП. Все, що вам потрібно, це положення: фіксований; зліва: 0; справа: 0; маржа: 0 авто; .

— Гектор Ордонез

23

Додати контейнер типу:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Тоді, поклавши свій ящик у цей дів, буде виконана робота.

— Ромул Уракагі Цай
джерело

"text-align: center" не працював для мене в центрі внутрішнього поділу.

— німа

2

Внутрішня скринька повинна бути display: inline-blockдля цього. (Можуть також працювати деякі інші відображувані значення, наприклад table.)

— Brilliand

кращим підходом до вищезазначеного css буде додавання margin:auto;та зміна ширини до width:50%або width:400px. тоді вміст може бути прямим текстом, блоковими елементами або вбудованими елементами.

— Джошуа Бернс

20

Просто додайте:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

— Боб
джерело

1

Це не спрацьовує position: fixed, про що і йдеться. Якщо я помиляюся, відредагуйте свою відповідь, щоб включити фрагмент коду, який можна виконати.

— Flimm

1

він чудово працює з фіксованим положенням

— Phuhui

1

Він працює з position: fixed, якщо встановити елемент max-widthабо widthна елемент.

— Js Lim

7

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

всередині нього може бути будь-який елемент з різною шириною, висотою або без. всі зосереджені.

— прафссор
джерело

5

Це рішення не вимагає від вас визначення ширини та висоти для спливаючого поділу.

http://jsfiddle.net/4Ly4B/33/

І замість обчислення розміру спливаючого вікна та мінус половини до вершини, javascript змінює розмір popupContainer, щоб заповнити весь екран ...

(100% -на висота, не працює при використанні дисплея: комірка таблиці; (який потрібно по центру щось вертикально)) ...

Все одно це працює :)

— BjarkeCK
джерело

4

left: 0;
right: 0;

Не працював під IE7.

Змінено на

left:auto;
right:auto;

Почав працювати, але в інших браузерах він перестає працювати! Тож використовується цей спосіб для IE7 нижче

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

— джатингер
джерело

Ви не проти редагувати свою відповідь, щоб включити все рішення?

— Flimm

Це не працюватиме без автоматичного поля на лівій і правій стороні.

— RoM4iK

2

Ви можете в основному обернути його в інший divі встановити його positionTo fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}

<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>

Розгорніть фрагмент

— Абдулла Длшад
джерело

2

Я використовував vw(ширина вікна перегляду) та vh(висота вікна перегляду). viewport - весь ваш екран. 100vw- ваша загальна ширина екранів і 100vhзагальна висота.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

— Асеем
джерело

1

Для виправлення позиції використовуйте це:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

— HeadAndTail
джерело

3

Будь ласка, надайте пояснення, чому ваше рішення спрацює з опублікованим питанням.

— Shekhar Chikara

0

Одна з можливих відповідей :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

— Мартін Вахі
джерело

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

— Flimm

0

Спробуйте використовувати це для горизонтальних елементів, які не будуть розташовані правильно по центру.

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

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

width: calc(100% - 200px);

— Роберт Росс
джерело

0

Я просто використовую щось подібне:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Він центрирує діалогове вікно для мене як по горизонталі, так і по вертикалі, і я можу використовувати різну ширину і висоту, щоб підходити до різних дозволів екрана, щоб зробити його чутливим, з медіа-запитами.

Не варіант, якщо вам все ще потрібно надати підтримку веб-переглядачам, де користувацькі властивості CSS або calc()не підтримуються (встановіть прапорець.)

— Фабієн Сноуаерт
джерело

0

Цей працював найкраще для мене:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

— Плетені
джерело

-13

Єдине надійне рішення - використовувати вирівнювання таблиці = центр, як у:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Я не можу повірити, що люди в усьому світі витрачають цю велику кількість дурного часу, щоб вирішити таку фундаментальну проблему, як зосередження діва. Рішення css працює не для всіх браузерів, рішення jquery - це програмне обчислювальне рішення та не є можливим з інших причин.

Я витрачав занадто багато часу, щоб уникнути використання таблиці, але досвід підказує мені припинити боротьбу з цим. Використовуйте таблицю для центрування діл. Працює весь час у всіх браузерах! Ніколи більше не хвилюйся.

— Чонг
джерело

11

Це зовсім не відповідає на питання. Не існує еквівалента не CSS position:fixed.

— Brilliand