Центрирование элемента с position: fixed

Если у вашего div известная ширина и высота, вам нужно установить top и left на 50%, чтобы центрировать левый верхний угол div. Затем также нужно задать margin-top и margin-left в отрицательном значении, равном половине высоты и ширины div, чтобы переместить центр к середине элемента.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Отрицательная половина высоты. */
margin-left: -250px; /* Отрицательная половина ширины. */

Если же у вашего div динамическая или неопределенная ширина и/или высота, вместо margin используйте transform, чтобы сместить элемент на отрицательную половину его ширины и высоты.

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

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

position: fixed;
width: 500px;
margin: 5% auto; /* Центрирует только по горизонтали, не по вертикали! */
left: 0;
right: 0;

Вы можете просто добавить 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 (что, конечно, должно быть у вас в любом случае!).

Чтобы создать такой контейнер, добавьте следующий CSS-код:

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

Затем поместите ваш блок внутри этого div, чтобы все работало корректно.

Изменение: как было упомянуто в комментариях, внутреннему содержимому нужно задать стиль display: inline-block, если у вас есть два div, например:

<div class="outer">
    <div class="inner">
         содержимое здесь
    </div>
</div>

Тогда CSS для внутреннего div должен выглядеть следующим образом:

.outer {
    position: fixed;
    text-align: center;
    left: 0;
    right: 0;
}
.inner {
    display: inline-block;
}

Таким образом, с left: 0; right: 0; и text-align: center у внешнего div, внутренний div будет выровнен по центру без необходимости явно задавать его ширину.

Для центровки фиксированного элемента на странице существует простой и эффективный способ. Вот как это можно сделать:

Горизонтальная центровка

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

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

Вертикальная и горизонтальная центровка

Если вы хотите централизовать элемент как по горизонтали, так и по вертикали (при условии, что высота элемента равна его ширине), используйте следующий код:

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

Здесь мы используем translate для перемещения элемента на половину вьюпорта по обеим осям (x и y), тем самым центрируя его.

Замечание

Обе эти техники не ограничивают ширину центрированного элемента меньше ширины вьюпорта, если вы применяете отступы (margins) в flexbox внутри самих элементом. Это особенно полезно, если ваш элемент имеет динамическое содержимое или вы хотите, чтобы он оставался адаптивным.

Чтобы решить вашу задачу, просто добавьте следующий код:

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

Эти стили помогут вам центрировать элемент по горизонтали, учитывая ширину окна браузера. Убедитесь, что элемент имеет позиционирование (например, position: relative; или position: absolute;), чтобы данные значения left и right корректно работали.