垂直对齐滚动效果

Question

我想在使用滚动效果的同时垂直对齐我的文本（这是多行）。我尝试将vertical-align: middle;放入我的代码中，但它不起作用。

我的CSS代码

.splash-container { 
    background: #ffffff; 
    z-index: 1; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: fixed; 
    top: 100px; left: 0; bottom: 0; right: 0; 
    /*margin-top: 20%;*/ 
} 

.splash { 
    width: 80%; 
    height: 50%; 
    margin: auto; 
    text-align: center; 
} 

.splash-head { 
    font-size: 20px; 
    font-weight: 900; 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
    color: #333; 
    border: 3px solid #333; 
    padding: 1em 1.6em; 
    border-radius: 5px; 
    line-height: 1em; 
} 

.splash-subhead { 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
    color: #333; 
    letter-spacing: 0.05em; 
    opacity: 0.8; 
} 

.content-wrapper { 
    position: absolute; 
    top: 100%; 
    z-index: 2; 
    background: #f2f2f2; 
} 
#description { 
    padding: 50px; 
} 

下面是HTML：

<div class="splash-container"> 
     <div class="splash"> 
      <h1 class="splash-head">Title</h1> 
      <p class="splash-subhead"> 
       Text 
      </p> 
      <p><a href="..." >Button</a></p> 
     </div> 
    </div> 

<div class="content-wrapper"> 
    <div class="content"> 
     <div id="description">(Text that will scroll over)</div><hr> 
    </div> 
</div> 

我想防溅容器具有垂直对齐，使所有的文字在它是在中间的屏幕。我试着用vertical-align: middle这样做，但没有奏效。

任何想法？谢谢。

Answer 1

这是你要找的东西吗？

html, body { margin: 0; height: 100%; } 
 

 
.splash-container { 
 
    background: #ffffff; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    top: 0; left: 0; bottom: 0; right: 0; 
 
    display: table; 
 
    /*margin-top: 20%;*/ 
 
} 
 

 
.splash { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.splash-head { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    font-weight: 900; 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    border: 3px solid #333; 
 
    padding: 1em 1.6em; 
 
    border-radius: 5px; 
 
    line-height: 1em; 
 
} 
 

 
.splash-subhead { 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    letter-spacing: 0.05em; 
 
    opacity: 0.8; 
 
} 
 

 
.content-wrapper { 
 
    position: absolute; 
 
    top: 100%; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 2; 
 
    background: #f2f2f2; 
 
} 
 
#description { 
 
    padding: 50px; 
 
}

<div class="splash-container"> 
 
    <div class="splash"> 
 
    <h1 class="splash-head">Title</h1> 
 
    <p class="splash-subhead"> 
 
     Text 
 
    </p> 
 
    <p><a href="..." >Button</a></p> 
 
    </div> 
 
</div> 
 

 
<div class="content-wrapper"> 
 
    <div class="content"> 
 
    <div id="description">(Text that will scroll over)</div><hr> 
 
    </div> 
 
</div>

Answer 2

编辑：LGSon发布了更优雅的解决方案看！

https://jsfiddle.net/0xt6r1s7/

我不知道滚动DIV应该做的，但是这将垂直/水平居中为vertical-align: middle;

添加了.splash使用伪元素一个可怕的灰色边框所以它更清晰哪里.splash元素是。

.splash-container { 
 
    background: #ffffff; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; left: 0; bottom: 0; right: 0; 
 
    text-align:center; 
 
} 
 
.splash-container:before { 
 
    content:""; 
 
    width:1px; 
 
    display:inline-block; 
 
    height:100%; 
 
    vertical-align:middle; 
 
} 
 

 
.splash { 
 
    border:1px solid #ddd; /* Demo purposes, as button has some space underneath it which makes it look out of alignment */ 
 
    width: 80%; 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align:middle; 
 
    display:inline-block; 
 
} 
 

 
.splash-head { 
 
    font-size: 20px; 
 
    font-weight: 900; 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    border: 3px solid #333; 
 
    padding: 1em 1.6em; 
 
    border-radius: 5px; 
 
    line-height: 1em; 
 
} 
 

 
.splash-subhead { 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    letter-spacing: 0.05em; 
 
    opacity: 0.8; 
 
} 
 

 
.content-wrapper { 
 
    position: absolute; 
 
    top: 100%; 
 
    z-index: 2; 
 
    background: #f2f2f2; 
 
} 
 
#description { 
 
    padding: 50px; 
 
}

<div class="splash-container"> 
 
     <div class="splash"> 
 
      <h1 class="splash-head">Title</h1> 
 
      <p class="splash-subhead"> 
 
       Text 
 
      </p> 
 
      <p><a href="..." >Button</a></p> 
 
     </div> 
 
    </div> 
 

 
<div class="content-wrapper"> 
 
    <div class="content"> 
 
     <div id="description">(Text that will scroll over)</div><hr> 
 
    </div> 
 
</div>