Zentrieren eines Inhalts in allen Geräten mit Padding-Top

Question

Ich habe Probleme mit der Zentrierung der .content Div in jedem Gerät. In einigen Geräten ist die .content genau zentriert, aber nicht in anderen. Ich benutze padding-top, um die .content nach unten zu drücken, so dass es in der Mitte eines beliebigen Geräts platziert werden könnte. Was soll ich tun, um die .content in jedem Gerät mit padding-top zu zentrieren? Sollte ich Javascript in einer solchen Situation verwenden?

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

Wie Sie bereits flex verwenden Sie die padding-top und fügen align-items: center; zu Ihrem .content entfernen konnte.

So CSS für .content wird:

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

Hier ist die aktualisierte Snippet.

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>