水平和垂直中心与CSS分配，我在做什么错

Question

我正在使用bootstrap在网站上工作，我正在尝试将内容以垂直和水平为中心。我是如此近，但是由于某种原因，左侧有一些额外的推动，使其不集中并添加水平滚动条。我似乎无法弄清楚它是什么。感谢您的帮助！

.header {
  text-align: center;
  background: url(sunset-blue-darker.jpg) no-repeat center;
  height: 100vh;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.center-both-ways {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.intro-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  padding: 20px;
  text-transform: none;
  font-weight: 400;
  color: #ff0000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="header" id="header">
  <!--header-start-->
  <div class="container">
    <div class="center-both-ways">
      <ul class="we-create animated fadeInUp delay-5s">
        <h1>HEADER</h1>
      </ul>
      <ul class="we-create animated fadeInUp delay-1s">
        <div class="col-xs-12 .col-sm-12 .col-lg-2 intro-text">
          <p>This is a
            <br>paragraph.</p>
        </div>
        <!-- end bootsrap div -->
      </ul>
      <!-- end transition effect -->
    </div>
    <!-- end center-both-ways -->
    <div class="arrow">
    </div>
    <!-- end arrow -->
  </div>
  <!-- close header -->
</header>
<!--header-end-->

Answer 1

为什么发生这种情况

• .container类在Bootstrap中默认情况下具有padding-left: 15px。

• 当前.center-both-ways的位置相对于视口，但 上没有设置 left属性，因此它的父容器的填充物将其按下15px。

简单修复

在.center-both-ways上设置left: 0，以将其连接到视口边缘并忽略其父母的填充。

示例

.header {
  height: 100vh;
}
.center-both-ways {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="header" id="header">
  <!--header-start-->
  <div class="container">
    <div class="center-both-ways">
      <ul class="we-create animated fadeInUp delay-5s">
        <h1>HEADER</h1>
      </ul>
      <ul class="we-create animated fadeInUp delay-1s">
        <div class="col-xs-12 .col-sm-12 .col-lg-2 intro-text">
          <p>This is a
            <br>paragraph.</p>
        </div>
        <!-- end bootsrap div -->
      </ul>
      <!-- end transition effect -->
    </div>
    <!-- end center-both-ways -->
    <div class="arrow">
    </div>
    <!-- end arrow -->
  </div>
  <!-- close header -->
</header>
<!--header-end-->

Answer 2

用于水平滚动条。

.center-both-ways {
width: 99%;
}

垂直

.header {
 height: 100%;
}

Answer 3

您的类.center-both-ways正在创建该问题设置，该问题左为0，而且工作正常。如下，

.center-both-ways {
  position: absolute;
  top: 0;
  left:0;
  .......
}

Answer 4

让我们尝试将.container显示为表格，然后更改.center-both-ways

的一些代码

请参阅更改代码

.container {
    width:100%;
    height:100%;
    display:table;
}
.center-both-ways {
    display:table-cell;
    vertical-align:middle;
}

我没有测试此代码，但应该有效：）