位置h1，边框在图片中心

Question

我正在使用Bootstrap 3制作横幅，最终结果应如下所示，并且高度为350px;

到目前为止，我对代码的降级可以是seen here。

我不确定如何使h1和p标签在中间对齐？目前它们位于顶部，我不知道如何定位它们。

当我看着< 768px时，图片变大了。是因为cover标签中的header吗？如何在< 768px上缩小图片？

header {
  height:100vh;
  background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

@media (max-width:767px) {
  header {
    /*height:100%;*/
    background-attachment:inherit;
    height:100vh;
  }
}

header h1 {
  /*background-color:rgba(255,255,255,0.36);*/
  padding:10px;
  text-align:center;
  border:5px solid rgba(108,111,119,0.19);
  /*box-shadow:0px 0px 1px #333;*/
}

header h1 {
  font-family:'Aladin';
  font-size:71px;
  color:#fff;
  text-shadow:1px 1px 1px #333;
}

@media (max-width:767px) {
  header h1 {
    font-size:41px;
  }
}

header p {
  text-align:center;
  padding-top:20px;
  font-size:26px;
  font-weight:600;
  font-family:'Source Sans Pro';
  /*letter-spacing:2px;*/
  color:#f5f5f5;
  text-shadow:1px 1px 1px #111;
  padding-bottom:20px;
}

@media (max-width:767px) {
  header p {
    font-size:17px;
  }
}

header .row.no-space p {
  text-align:right;
}
/* Social Media Position */
header .row.no-space {
  margin-top:initial;
  bottom:0px;
  position:fixed;
  right:20px;
}

header .fa {
  color:#fff;
  text-shadow:1px 1px 1px #333;
  padding:7px;
}

<header>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 text-bg">
                    <h1>Welcome on free feelings</h1></div>
                <div class="col-md-12">
                    <p>Animated header with scroll engine </p>
                </div>
            </div>
            <div class="row hidden-xs no-space">
                <div class="col-md-12">
                    <p>
                        <i class="fa fa-instagram"></i>
                        <i class="fa fa-facebook-official"></i>
                        <i class="fa fa-pinterest-square"></i>
                    </p>
                </div>
            </div>
        </div>
    </header>

Answer 1

要在页面上垂直居中放置内容，我可以在<header>元素上使用CSS flexbox，如下所示：

header {
  display: flex;
  align-items: center;
}

关于图像的大小，在移动设备上将文本对齐到页面顶部是否可以接受？

如果是这样，那么我建议从移动设备的标头中删除height: 100vh和flexbox。相反，您需要一个与屏幕宽度相关的响应图像，但是由于您使用的是背景图像，您可以这样做：

header {
  background-image: url(...);
  background-size: cover;
  height: 0; /* Use padding-bottom to define height */
  padding-bottom: 62%; /*Aspect ratio of image (h/w*100)*/
}

Answer 2

在CSS底部添加此代码：

body {
    margin: 0
}

h1 {
    position: absolute;
}

.text-bg {
    display: flex;
    justify-content: center;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Answer 3

在这所古老的学校中，您可以使用display: table方法（目前不推荐这种方法）：

header {
  height:100vh;
  background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  display: table;
  width: 100%;
}
.container {
  display: table-cell;
  vertical-align: middle;
}

当前推荐的方法通常是使用Flex，它更干净，更好。如果您想保持所有状态不变，那么只需将标头CSS更改为：

header {
  height:100vh;
  background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  display: flex;
  align-items: center;
}