どのように応答中心のdivをビューポートに従わせるには？

Question

ビューポートに続くdivにします。私は固定配置を使用することができません。なんらかの理由でdivがビューポートに正しく追従しないため、特にスクロール方向を変更する場合には常に遅れます。あなたはplunker hereの意味を知ることができます。

これが問題の最初の部分です。 2つ目は、ビューポートが表示されたら直ちにビューポートに移動するためにdivが必要なことです。 （プランナーの出力パネルの任意の場所をクリックすると、divが表示されます）。私の実際のアプリでは、divの代わりに入力アニメーションを持つコンポーネントを使用しているので、表示される* ngの部分は重要ですので、[hidden]私は恐れています。

私はなぜfixedポジショニングを使用できませんか？
基本的に、固定配置では、ビューポートにスクロールバーが含まれている場合、要素の幅が兄弟要素とは異なって計算されます。また、ビューポートでクリップされる影があるため、要素上でoverflow: scrollトリックを使用することはできません。また、2つのスクロールバーを持つと醜いように見えます。

Answer 1

フレックスを使用したラッパーの固定された中央のdivです。 Demo Here

#wrapper{ 
     position:absolute; 
     width:100%; 
     height:100%; 
     position:fixed; 
     display: flex; 
    justify-content: center; 
     } 
     #my-app{ 
     position:relative; 
     width:50%; 
     height:50%; 
     background-color:green; 
     } 



    <div id="wrapper"> 
     <div id="my-app"> 
     </div> 
     </div>