<div class="wrap">
  <h1 class="top">Ahoy</h1>
  <div class="main">
    <div class="inner">
      <div class="content">
        <div class="menu">
          <h2>Studies</h2>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
        <div class="menu">
          <h2>Anime</h2>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
        <div class="menu">
          <h2>Misc</h2>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
        <div class="menu">
          <h2>Torrents</h2>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
ul {
	margin:0;
	padding:0;
	list-style:none;
}
html, body {
	margin:0;
	padding:0;
	height:100%;
}
/* use this instead of fixed attachment to combat bug in ios */
body:after {
	content:"";
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1;
	background:url(http://www.pmob.co.uk/mobile/images/a1.jpg) no-repeat  50% 50%;
	background-size:cover;
}
.wrap {
	display:table;
	width:100%;
	height:100%;
	max-width:980px;
	margin:auto;
}
.top {
	margin:0;
	padding:50px 10px 20px;
	font-size:4rem;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	height:1px;/* collapse to content size*/
}
.main {
	display:table-row;
}
.inner {
	display:table-cell;
	vertical-align:middle;
}
.content {
	display:flex;
	justify-content:space-around;
	background:rgba(255,255,255,0.6);
	box-shadow:0 0 10px 10px rgba(0,0,0,0.5);
	padding:20px 15px;
}
.menu h2 {
	text-align:center;
	margin:0;
	padding:10px 0;
	border-bottom:1px solid #000;
}
.menu ul {
	padding:25px 0;
	line-height:1.5;
}
.menu li {
	text-align:center;
}
.menu a {
	color:#000;
	text-decoration:none;
	padding:5px;
  display:block;
}
.menu a:hover {
	background:rgba(0,0,0,0.5);
	color:#fff;
}
@media screen and (max-width:680px){
	.content{display:block;}
}