Делая div вертикально центрированным, делая его немного горизонтально горизонтально

Question

Итак, я пытаюсь сделать div вертикально центрированным, используя CSS метод позиционирования и преобразования, но, очевидно, он делает div немного горизонтально отцентрированным. вот мой код:

HTML:

<div class="row container-fluid top_header">
      <div class="col-12 container-xl">
        <div class="top_header_texts"></div>
      </div>
</div>

CSS:

.top_header {
  box-sizing: border-box;
  background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(44, 27, 154));
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 0 0 0;
  width: 100%;
  height: 95vh;
  position: relative;
}

.top_header_texts {
  display: block;
  margin: 0 auto;
  color: White;
  font-weight: bold;
  font-size: 60px;
  position: absolute;
  top:50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  background-color: red;
}

Результат:

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

Answer 1

Предполагается, что вы используете последнюю версию bootstrap. (4.1.1)

У .container-fluid и .col-12 есть атрибуты заполнения, и вы можете попробовать перезаписать его с помощью .p-0 class

<div class="row container-fluid top_header p-0">
      <div class="col-12 container-xl p-0">
        <div class="top_header_texts"></div>
      </div>
</div>

Онлайн-подтверждение

Answer 2

Просто text-align: center исправляет проблему, как вы видите:

.top_header {
  box-sizing: border-box;
  background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(44, 27, 154));
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 0 0 0;
  flex: 0 0 100%;
  height: 95vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.top_header .col-12 {
  width: 100%;
}

.top_header_texts {
  margin: 0 auto;
  color: White;
  font-weight: bold;
  font-size: 60px;
  background-color: red;
  text-align: center
}

<div class="row container-fluid top_header">
      <div class="col-12 container-xl">
        <div class="top_header_texts">text</div>
      </div>
</div>

Answer 3

container-fluid и container-xl классы bootstrap приносит padding-left:15px. попробуйте установить его на ноль.

HTML:

<div class="row container-fluid top_header paddingLeft_0">
  <div class="col-12 container-xl paddingLeft_0">
    <div class="top_header_texts"></div>
  </div>
</div>

CSS:

div.paddingLeft_0 {
    padding-left:0;
}

Answer 4

используйте .text-center или .mx-auto, чтобы держать контент в центре