Question

我希望2个标题位于我的网站中心，但仍然可以向下滚动以显示下面的内容多次使用<br/>或margin-top使用px或%扩展会严重依赖于您的显示器尺寸和分辨率。
我希望这些标题在所有不同的显示器上都处于中心位置，那么我该怎么做呢？

Answer 1

要完美（垂直）居中，您可以使用vh和transform的组合。要使这个“中心”垂直两个标题，你需要将标题包装在一个像这样的元素中：

<div id="hero-container">
    <h1>Haarige Haftung</h1>
    <h2>Nanostrukturen für klebstofffreies Haften: Wie die Füße von Geckos zum Superkleber werden</h2>
</div>

然后，将样式应用于容器，以使这两个元素垂直居中：

#hero-container {
  position: relative;
  margin-top: 50vh;
  transform: translateY(-50%);
}

working fiddle

要将它提升到一个新的水平，并让“空间”填满浏览器的高度，这样你就必须向下滚动才能看到剩下的内容，你需要再添加一个容器，就像这样：

<div id="hero">
    <div id="hero-container">
        <h1>Haarige Haftung</h1>
        <h2>Nanostrukturen für klebstofffreies Haften: Wie die Füße von Geckos zum Superkleber werden</h2>
    </div>
</div>

CSS：

#hero { 位置：相对; 身高：100vh; }

#hero-container {
  position: relative;
  margin-top: 50vh;
  transform: translateY(-50%);
}

Answer 2

尝试使用其他测量类型，例如，视口宽度vw，视口高度vh或%。

视口的视口宽度和高度度量。包含元素的百分比度量（必须定义position值。

Answer 3

这是你的略微更新的标记，我在这里使用表格布局来垂直居中元素。但重要请注意，父元素应具有高度，以便儿童的内容垂直居中，

<center>
   <div class="parent">
        <div class="child">
             <h1>Haarige Haftung</h1>

              <h2>Nanostrukturen für klebstofffreies Haften:</br>
                Wie die Füße von Geckos zum Superkleber werden</h2>

            <hr>
       </div>
    </div>
</center>

这是css o的必要部分，我使用vh单位根据子内容的居中内容为父级提供高度。希望有所帮助，以下是演示的jsFiddle链接：https://jsfiddle.net/k8kb898o/

   body {

        background: url(images/GeckoVonUnten.jpg) no-repeat center center fixed;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /* Hintergrundbild */
        font-family: 'Nunito', sans-serif;
        /* Schriftart */
        height: 100%;
        width: 100%;
    }
    .parent{
       display: table;
       width: 100%;
       height: 100vh;
   }
   .child{
      display: table-cell;
      vertical-align: middle;
   }

Answer 4

你需要达到这个目的是使用vh。 vh w3schools定义它是

相对于视口高度的1％*

这正是你要找的东西

因此，要在用户打开时将此标题作为唯一可见元素，您可以将它们包装在div中，然后将div的高度设为100vh。 100vh表示100％的可用视口，它是用户可以看到的100％视图。

 <div class='main-headers'>
            <h1>Haarige Haftung</h1>

            <h2>Nanostrukturen für klebstofffreies Haften:</br>
                Wie die Füße von Geckos zum Superkleber werden</h2>
 </div>

并在您的css文件中：

.main-headers{
  height:100vh;
}

好的，所以你有两个标题是用户唯一可见的元素，但如果你想让它们在视口中居，你有100％的视口，你可以做的是给每个20vh作为高度和然后将基于vh的填充应用于其主容器.mainheaders。

h1 {

    opacity: 0.5;
    background-color: #9B26AF;
    color: #50ffffff;
    font-size: 175;
    height:20vh;
    margin-bottom:10vh;
    } 
h2 {

    opacity: 0.5;
    background-color: #68EFAD;
    color: black;
    font-size: 50;
    height:20vh;
}
.main-headers{
  height:100vh;
  padding-top:25vh;
  padding-bottom:25vh;
}

你可以在这里看到完整的代码

＆＃13;

body {

    background: url(images/GeckoVonUnten.jpg) no-repeat center center fixed;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* Hintergrundbild */
    font-family: 'Nunito', sans-serif;
    /* Schriftart */

    }

h1 {

    opacity: 0.5;
    background-color: #9B26AF;
    color: #50ffffff;
    font-size: 175;
    height:20vh;
    margin-bottom:10vh;


    }   

h2 {

    opacity: 0.5;
    background-color: #68EFAD;
    color: black;
    font-size: 50;
    height:20vh;
    
    

}

.main-headers{
  height:100vh;
  padding-top:25vh;
  padding-bottom:25vh;
}

h3 {

    background-color: #68EFAD;
    font-size: 50;
    color: #9B26AF;

}

h4 {

    background-color: #68EFAD;
    font-size: 50;
    color: #9B26AF;

}

h5 {

    background-color: #68EFAD;
    font-size: 50;
    color: #9B26AF;

}

h6 {

    background-color: #68EFAD;
    font-size: 50;
    color: #9B26AF;

}

＆＃13;

<html>

    <head>

        <title>Haarige Haftung</title>

        <link href="style.css" rel="stylesheet">
        <link rel="shortcut icon" type="image/x-icon" href="images/Icon.ico">

        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
        <!--Für die Schriftart-->

    </head>

    <body>

        <center>
          <div class='main-headers'>
            <h1>Haarige Haftung</h1>

            <h2>Nanostrukturen für klebstofffreies Haften:</br>
                Wie die Füße von Geckos zum Superkleber werden</h2>
          </div>

            <hr>

            <h3><a href="DerGecko.html" >Der Gecko</a></h3>

            <h4><a href="DieFüße.html" >Die Füße</a></h4>

            <h5><a href="AndereNanostrukturen.html" >Andere Nanostrukturen</a></h5>

            <h6><a href="WoKannManEsAnwenden.html" >Wo kann man es anwenden?</a></h6>

        </center>

    </body> 

</html>

＆＃13;

不使用px或％单位垂直对齐元素

4 个答案: