Question

我正在使用bootstrap在网站上工作，并且我试图使标题中的内容垂直和水平居中。我是如此接近，但由于某种原因，左边有一些额外的东西，使它不居中并添加一个水平滚动条。我似乎无法弄清楚它是什么。谢谢你的帮助！

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

为什么会发生这种情况

默认情况下，.container类在引导程序中有padding-left: 15px。
目前.center-both-ways相对于视口定位，但上没有设置left属性，因此它被父容器推送15px＆＃ 39;填充。

简单修复

在left: 0上设置.center-both-ways，以便将其附加到视口边缘并忽略其父级填充。

实施例

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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;
}

我还没有测试过这段代码，但它应该可行：）

使用CSS的水平和垂直中心分区，我做错了什么？

4 个答案:

为什么会发生这种情况

简单修复

实施例