誰もこの赤いdivを中心にする方法を教えてくださいできますか？

Question

グレイ（親） "ラッパー" divの内側に、この "赤" div（div = "red"）をどのように配置することができますか？私は、赤いdivがラッパーdivの中心（垂直方向と水平方向の両方）に正確に配置されるようにします。

body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: rgba(255, 249, 249, 1); 
 
    margin: 0px; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
} 
 
.wrapper { 
 
    background-color: rgba(204, 204, 204, 1); 
 
    height: 600px; 
 
    width: 100%; 
 
    margin: auto; 
 
    color: rgba(255, 255, 255, 1); 
 
    text-align: center; 
 
    font-weight: bold; 
 
    display: block; 
 
    position: relative; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
} 
 
.red { 
 
    background-color: rgba(255, 0, 0, 1); 
 
    height: 50%; 
 
    width: 600px; 
 
    position: absolute; 
 
    font-weight: normal; 
 
    text-align: left; 
 
    /* [disabled]line-height: 100px; */ 
 
    display: block; 
 
    vertical-align: top; 
 
    /* [disabled]z-index: 1; */ 
 
    left: 0%; 
 
    top: 0px; 
 
    margin-top: 0px; 
 
    margin-right: auto; 
 
    margin-bottom: auto; 
 
    margin-left: auto; 
 
    right: 0px; 
 
    bottom: 0px; 
 
} 
 
.green { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    background-color: rgba(0, 255, 0, 1); 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    display: block; 
 
    /* [disabled]z-index: -1; */ 
 
    margin: 0px; 
 
    clear: none; 
 
} 
 
.blue { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: absolute; 
 
    background-color: rgba(0, 51, 153, 1); 
 
    left: 400px; 
 
    top: 20px; 
 
    right: 0px; 
 
    bottom: 100px; 
 
    display: block; 
 
    z-index: 1; 
 
    margin: 0px; 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    Test 
 
    <div class="red">Red 
 
    <div class="green">Green</div> 
 
    <div class="blue">Blue</div> 
 
    </div> 
 
</div>

Answer 1

あなたは、CSSでのご.redにこれを追加することによってこれを行うことができます：ここでは、コードです。ここ

top: 50%; 
transform: translateY(-50%); 

は一例です：

body { 
 
    width: 100%; 
 
    background-color: rgba(255, 249, 249, 1); 
 
    margin: 0; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.wrapper { 
 
    background-color: rgba(204, 204, 204, 1); 
 
    height: 600px; 
 
    width: 100%; 
 
    color: rgba(255, 255, 255, 1); 
 
    text-align: center; 
 
    font-weight: bold; 
 
    position: relative; 
 
} 
 
.red { 
 
    background-color: rgba(255, 0, 0, 1); 
 
    height: 50%; 
 
    width: 600px; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    font-weight: normal; 
 
    text-align: left; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.green { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: rgba(0, 255, 0, 1); 
 
} 
 
.blue { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: absolute; 
 
    background-color: rgba(0, 51, 153, 1); 
 
    top: 20px; 
 
    right: 0; 
 
}

<div class="wrapper"> 
 

 
    Test 
 
    <div class="red">Red 
 
    <div class="green">Green</div> 
 
    <div class="blue">Blue</div> 
 
    </div> 
 
</div>

編集：あなたのCSSを整理しました。私は多くの不要な行を削除しました。それらを自分のコードと比較することができます。ヒント：値が0の場合はタイプが必要ないので、0px、0%、0emなどと書かれているものは0です。

Answer 2

縦横にセンタリングするには、flexを使用することをおすすめします。

あなたの灰色のコンテナ...のみthosesプロパティを必要とし、赤の1はもうtop: 50%、bottom: 0、などのようなマージン/位置のプロパティを必要としない：ここでは

display: flex; 
align-items: center; // Vertically center content 
justify-content: center; // Horizontally center content 

demo