複数のアイテムをディスプレイでフレキシブルに調整する

Question

divの中心をjustify-content：centerとalign-items：centerで区切りにしたいのですが、divはページの100％幅と高さにする必要があります絶対的な中心にいる。

divの上または下に要素を追加すると、問題が発生します。これは、divを中心にし、絶対中心にはない高さを減らします。

は、ここで私はちょうどこの問題を解決するために

.typewriter{margin-top: -41px;} 

を追加することができるが、これを行うには良い方法である必要がありますありますように私は感じるのページhttps://jsfiddle.net/nybf8tjc/1 です。

Answer 1

を見て、センタリングするための通常の設定を追加し、そのアクションで

.typewriter { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    etc. 
} 

のような：https://jsfiddle.net/de3rf65j/

Answer 2

これを使用すると簡単に達成できます。

div.father { 
 
    width: 100vw; 
 
    height: 100vw; 
 
    
 
    position: absolute; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 
    
 
div.father div.child { 
 
    width: 400px; 
 
    height: 250px; 
 
    
 
    background-color: teal; 
 
    
 
    position: relative; 
 
    }

<div class="father"> 
 
    <div class="child"></div> 
 
</div>

また、あなたはtransformプロパティを使用することができます：あなたがしたいコンテナを中央にする必要があり

div.child { 
 
    width: 400px; 
 
    height: 250px; 
 
    
 
    margin:0; 
 
    padding: 0; 
 
    
 
    
 
    background-color: teal; 
 
    
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    
 
    transform: translate(-50%, -50%); 
 
}

を。 あなたが.typewriter絶対位置要素を作ることができますhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/