センタリングの手助け

Question

私はトップ、ミドル、ボトムの構造を作りたいと思っています。 トップが30pxから30px、ボトムが30px、中間のテキストがまったく同じ距離になることが必要です（これが私の主な問題です）。 もちろん、それがすべての決議に適応されるという私の目標です。

Answer 1

あなたは絶対位置を使用することができます。

<div id="top">this is top</div> 

<div id="middle"> 
    <span class="full_center">middle is here</span> 
</div> 

<div id="bottom">bottom down below</div> 

CSS：
あなたはCodepen link here

HTMLで遊ぶことができます トリックは、サンプルコード/スニペットを提供.full_centerクラス

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

#top { 
    background-color: #ccc; 
    height: 30px; 
    position: relative; 
    top: 30px; 
} 

#middle { 
    background-color: aliceblue; 
    min-height: calc(100vh - 60px); 
    height: auto; 
} 

#bottom { 
    height: 30px; 
    background-color: #ccc; 
    position: relative; 
    bottom: 30px; 
} 


.full_center { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
    width: 100%; 
} 

Answer 2

:)事前に

おかげでdisplay:flex;を使用してみてください。それは私があなたの質問から引き出すことができる最も近いものです。ここでは、background-color:red;を使用して、上部と下部からの距離が30pxであることを示しました。

*{ 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing:border-box; 
 
} 
 
.outer{ 
 
    width:100%; 
 
    height:100vh; 
 
    background-color:red; 
 
    padding:30px 0; 
 
} 
 
.inner{ 
 
    height:100%; 
 
    width:100%; 
 
    background-color:green; 
 
    display:flex; 
 
    align-items:center; 
 
} 
 
p{ 
 
    width:60%; 
 
    margin:0 auto; 
 
    text-align:center; 
 
    color:white; 
 
    font-size:2em; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <p>This is text<br> 
 
    This is text<br> 
 
    This is text<br> 
 
    This is text<br></p> 
 
    </div> 
 
    </div>