画面分割ウィンドウの中央にスクロールダウンボタンを配置する方法はありますか？

Question

分割画面は、ここに似ています：http://codepen.io/rileyjshaw/pen/vGLvVo

私はそれにスクロールダウンボタンを配置しようとしています。このボタンをウィンドウの中央と下部に配置するにはどうしたらいいですか？

HTML：

.half 
    p These panes always split the window in the correct direction. 
.half 
    p 
     | Pure CSS, only 5 rules. 
     span.social 
      | by 
      a[target='_blank' href='https://twitter.com/rileyjshaw'] rileyjshaw 
      |. 

CSS：

// Maximum aspect ratio beforem switching to a vertical split. 
$ASPECT_W: 4 
$ASPECT_H: 3 

// All you need, right here: 
body 
    display: flex 
    flex-wrap: wrap 

.half 
    width: 100% 
    flex-basis: $ASPECT_W/($ASPECT_W + $ASPECT_H) * 100vh 
    flex-grow: 1 

// Good night, and good luck. 

















// Doop, de boop boop... 





















// Unrelated visual styles: 
html, body 
    height: 100% 
    width: 100% 
    margin: 0 

.half 
    position: relative 
    font: 600 32px Poppins, sans-serif 
    color: #f6e8ea 
    background: #ef626c 
    + .half 
     background: #84dcff 

p 
    position: absolute 
    top: 50% 
    left: 50% 
    transform: translate(-50%, -50%) 
    width: 72% 
    margin: 0 
    text-align: center 

.social 
    display: block 
    max-height: 0 
    opacity: 0 
    animation: appear 1s 4s 

a 
    color: #f9eef0 

@keyframes appear 
    50% 
     max-height: 2em 
     opacity: 0 
    100% 
     max-height: 2em 


opacity: 1 

Answer 1

あなたの問題を解決するには、絶対位置でのdivを作成することです。あなたはそれを中央と底に整列させることができます。ここで私はcodepen例を使用して作成されたいくつかの例のHTMLとCSS：http://codepen.io/tcaer/pen/xOpjBB

HTML：

<div class="button"></div> 

CSS：

position: absolute; 
z-index: 2; 
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
bottom: 100px; 

あなたが別のdiv内position: absoluteを使用する必要がある場合は、ちょうど上position: relativeを置きます親コンテナ