Centering a content in all devices using padding-top - css

Question

I have been having trouble centering the .content div in any device. In some devices, the .content is exactly centered but not in others. I use padding-top to push the .content down so it could be placed on the center of any device. What should I do to center the .content in any device using padding-top? Should I use Javascript in this kind of situation?
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">
Download
Docs
Tutorial
Reference
</div>
</header>
<div class="content">
<img src="http://emblemsbf.com/img/36593.jpg" alt="logo">
<div class="content-nav">
Home
Blog
Forum
Stuff
</div>
</div>
</div>

Answer 1

As you are already using flex you could remove the padding-top and add align-items: center; to your .content.
So your CSS for .content becomes:
.content {
display: flex;
flex-direction: column;
align-items: center;
}
Here's the updated 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">
Download
Docs
Tutorial
Reference
</div>
</header>
<div class="content">
<img src="http://emblemsbf.com/img/36593.jpg" alt="logo">
<div class="content-nav">
Home
Blog
Forum
Stuff
</div>
</div>
</div>