Center a container horizontally and vertically (with responsive elements)

Question

I'm trying to center a logo and menu list in the center of the page (keeping them side by side on desktop view) and stacked in mobile view. My problem is making them neatly stacked in mobile view. For some reason when it goes into mobile, all the items get pushed down. I'm also trying to having the social media links stay right at the bottom of the viewport at across all devices.

Here is my code:

https://jsfiddle.net/bp8epdbx/1/

HTML:

<div class = "container">
<div class="block" style="height: 600px;">
<div class="centered centered-mobile">

<img src="http://allprofitorganization.com/wp-content/uploads/2017/08/home-logo-delete.png" />

</div>
<div class="centered vertical-menu">

<a href="#">EVENTS</a>
<a href="#">STORE</a>
<a href="#">ARTISTS</a>

</div>  
</div>

<div id="manu-social" class="manu">
    <div id="manu-social" class="manu"></div>
 <ul id="manu-social-items" class="manu-items">      
 <li><a href="https://www.facebook.com/allprofitofficial" target="_blank"></a></li>      
 <li><a href="https://twitter.com/realallprofit" target="_blank"></a></li>       
 <li><a href="https://instagram.com/allprofitofficial" target="_blank"></a></li>         
 </ul>       
</div>

</div>

CSS:

body {
    background: #fff;
}
img{
  width: 270px;
  height: 100%;
}

.block {
  text-align: center !important;
  margin: 80px !important;
  HEIGHT: 300px;
}

.block:before {
  content: '\200B';
/*   content: '';
  margin-left: -0.25em; */
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  margin: 15px;
 }

.logo
{
    float: left;
    vertical-align: middle;
    width: 300px;
  margin: 15px;
}

.nav
{
     float: right;
    vertical-align: middle;
    width: 300px;
  margin: 15px;
}

.vertical-menu {
    width: 85px;
}

.vertical-menu a {
    font-size: 16px !important;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;

  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.vertical-menu a:hover {
  color: red !important;

}

.vertical-menu a.active {
    background-color: #4CAF50;
    color: white;
}




#manu-social {
padding: 20px 0;
}
#manu-social ul {
list-style: none;
text-align: center;
margin: 0;
padding: 10px 0;
}
#manu-social ul li {
display: inline-block;
position: relative;
}
#manu-social li a {
color: #D3D3D3;
margin: 0 10px;
}
#manu-social li a:hover {
color: red;
}
#manu-social li a::before {
    content: "\f135";
    display: inline-block;
    padding: 0 5px;
    font-family: FontAwesome;
    font-size: 24px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#manu-social li a[href*="facebook.com/allprofitofficial"]::before {
    content: "\f09a";
}
#manu-social li a[href*="twitter.com/realallprofit"]::before {
    content: "\f099";
}
#manu-social li a[href*="instagram.com/allprofitofficial"]::before {
    content: "\f16d";
}

a {
-webkit-transition: .15s all linear;
-moz-transition: .15s all linear;
-o-transition: .15s all linear;
transition: .15s all linear;
}

@media screen and (max-width: 960px) { /* whatever width you prefer */
  .nav, .logo {
    float:none;
    position: static;
    /* width: auto; -- may be helpful */  
  }
}

@media screen and (max-width: 720px) {
  .nav {
    /* display: none; —- remove the menu, perhaps */
  }
}

@media print, screen and (max-width: 480px) {
  .content, .menu {
    /* more targetting -- usually margins and padding adjusting */
  }
}

Answer 1

You can use flexbox to vertically and horizontally center the logo and nav on desktop and then just change the flex-direction for mobile to get them to stack.

.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 480px) {
  .block {
    flex-direction: column;
  }
}