使 div 垂直居中導致它稍微水平偏離居中

Question

所以，我正在嘗試使用CSS位置和變換方法使div垂直居中，但顯然它使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

如您所見，只需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 2

bootstrap 的container-fluid和container-xl類帶來了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 3

假設您使用的是最新版本的引導程序。 (4.1.1)

.container-fluid和.col-12有 padding 屬性，可以嘗試用.p-0類覆蓋

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

使用 .text-center 或 .mx-auto 將內容保持在中心