パディングトップを使用してすべてのデバイスのコンテンツを中央に配置

Question

どのデバイスでも.content divの配置に問題がありました。一部のデバイスでは、.contentは正確に中央に配置されますが、他のデバイスには配置されません。 padding-topを使用して.contentを押し下げて、どのデバイスの中央にも置くことができます。 padding-topを使用して、どのデバイスにも.contentを配置するにはどうすればよいですか？このような状況でJa​​vascriptを使うべきですか？

body { 
 
    margin: 0; 
 
} 
 

 
.whole { 
 
    height: 100vh; 
 
    background: #d44949; 
 
} 
 

 
header:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.logo { 
 
    font: 1.4em 'Open Sans',sans-serif; 
 
    color: #fcfcfc; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    margin-left: 15px; 
 
} 
 

 
.logo > span { 
 
    font-style: italic; 
 
    color: #d8d8d8; 
 
} 
 

 
.header-nav { 
 
    float: right; 
 
    margin: 20px 15px 0 0; 
 
} 
 

 
.header-nav > a { 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
    font: 1em 'Open Sans',sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.header-nav > a:not(:first-child) { 
 
    margin-left: 15px; 
 
} 
 

 
.header-nav > a:hover { 
 
    color: yellow; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding-top: calc(100vh/2); 
 
} 
 

 
.content > img { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    margin: auto; 
 
} 
 

 
.content-nav { 
 
    margin: auto; 
 
    padding-top: 20px; 
 
} 
 

 
.content-nav > a { 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
    font: 1em 'Open Sans',sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.content-nav > a:not(:first-child) { 
 
    margin-left: 10px; 
 
}

<div class="whole"> 
 
    <header> 
 
    <h1 class="logo">Max<span>&</span>Spoon</h1> 
 
    <div class="header-nav"> 
 
     <a href="/">Download</a> 
 
     <a href="/">Docs</a> 
 
     <a href="/">Tutorial</a> 
 
     <a href="/">Reference</a> 
 
    </div> 
 
    </header> 
 
    <div class="content"> 
 
    <img src="http://emblemsbf.com/img/36593.jpg" alt="logo"> 
 
    <div class="content-nav"> 
 
     <a href="/">Home</a> 
 
     <a href="/">Blog</a> 
 
     <a href="/">Forum</a> 
 
     <a href="/">Stuff</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたはすでにあなたがpadding-topを削除し、あなたの.contentに​​を追加することができflexを使用していたよう。

だから、.contentのためのあなたのCSSは次のようになります。

.content { 
     display: flex; 
     flex-direction: column; 
     align-items: center; 
    } 

はここで更新スニペットです。

body { 
 
    margin: 0; 
 
} 
 
.whole { 
 
    height: 100vh; 
 
    background: #d44949; 
 
} 
 
header:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.logo { 
 
    font: 1.4em'Open Sans', sans-serif; 
 
    color: #fcfcfc; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    margin-left: 15px; 
 
} 
 
.logo > span { 
 
    font-style: italic; 
 
    color: #d8d8d8; 
 
} 
 
.header-nav { 
 
    float: right; 
 
    margin: 20px 15px 0 0; 
 
} 
 
.header-nav > a { 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
    font: 1em'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 
.header-nav > a:not(:first-child) { 
 
    margin-left: 15px; 
 
} 
 
.header-nav > a:hover { 
 
    color: yellow; 
 
} 
 
.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.content > img { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    margin: auto; 
 
} 
 
.content-nav { 
 
    margin: auto; 
 
    padding-top: 20px; 
 
} 
 
.content-nav > a { 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
    font: 1em'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 
.content-nav > a:not(:first-child) { 
 
    margin-left: 10px; 
 
}

<div class="whole"> 
 
    <header> 
 
    <h1 class="logo">Max<span>&</span>Spoon</h1> 
 
    <div class="header-nav"> 
 
     <a href="/">Download</a> 
 
     <a href="/">Docs</a> 
 
     <a href="/">Tutorial</a> 
 
     <a href="/">Reference</a> 
 
    </div> 
 
    </header> 
 
    <div class="content"> 
 
    <img src="http://emblemsbf.com/img/36593.jpg" alt="logo"> 
 
    <div class="content-nav"> 
 
     <a href="/">Home</a> 
 
     <a href="/">Blog</a> 
 
     <a href="/">Forum</a> 
 
     <a href="/">Stuff</a> 
 
    </div> 
 
    </div> 
 
</div>