Как сделать, чтобы текст был посередине относительно окна браузера И горизонтальной полосы прокрутки, возникающей при уменьшении ширины окна браузера?

Question

Как сделать, чтобы текст был посередине относительно окна браузера И горизонтальной полосы прокрутки, возникающей, если мы уменьшаем ширину окна браузера?
То есть, вот, например:

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

А мне надо, чтобы текст И относительно полосы прокрутки был посередине, то есть здесь:

Есть ли для этого уже готовый механизм в html/css, а то я всё обыскал и нашёл только для "по отношению окна браузера", или нужно что-то самому писать(тут я имею ввиду объединение многих html-тегов)?

Если нужно самому что-то писать, то скиньте, пожалуйста возможную концепцию кода.

Вот, если что, то мой код:

body {
  background-color: #2a2929;
  background: -moz-linear-gradient(to bottom, #333 20%, #2a2929 90%, #808080);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#808080), color-stop(0.5, #2a2929)) local;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#808080') local;
  background-repeat: repeat-x;
  height: 968px;
  background-size: 100% 100%;
}

.new {
  color: darkorange;
  position: relative;
  top: 10px;
  text-decoration: none;
}

<div align="center" style="position:relative;">
  <h1 style="color: darkorange;">Inst-Post Searcher</h1>
  <hr width="1900" size="2" color="darkorange" />
</div>
<form method="post">
  <div style="position: relative; top: 835px; font-size: 1.0vw; color: darkorange; background: none; border: none;">
    <hr width="1900" size="5" color="#000000" />
    <a style="left: 820px;" class="new" align="centre" href='@Url.Page("/PrivacyPolicy")'>Политика конфиденциальности</a>
    <a style="right: 200px;" class="new" align="left" href='@Url.Page("/TermsOfUse")'>Условия использования</a>
    <a style="left: 1180px;" class="new" align="right" href='@Url.Page("/DeveloperContacts")'>Контакты разработчика</a>
  </div>
</form>

Answer 1

Такой вариант?

body {
  width: 200vw;
  height: 200vh;
}

.align-win {
  display: block;
  width: 100vw;
  text-align: center;
  position: fixed;
  left: calc(50vw - 50%);
}

<div class="align-win">
  Я всегда буду посередине
</div>

БЛОГ НА HUSL

Как сделать, чтобы текст был посередине относительно окна браузера И горизонтальной полосы прокрутки, возникающей при уменьшении ширины окна браузера?

Ответы (1 шт):