PureCSS vertical center/middle div elements - html

Question

I'm trying to center my div elements (PureCSS) to build a grid like this (100% width and height, no scrollbar):
Now I need to align all the elements vertically and horizontally centered.
Here is my HTML Code:
<div class="pure-g" style="height:100%;">
<div class="pure-u-1-5" style="height:90%;">
<div class="pure-g" style="height:50%;">
<div class="pure-u-1-1 visible"><img src="img/logo.png" alt="Logo" style="width:100%;"></div>
<div class="pure-u-1-1 visible"><img src="img/ad.png" alt="AD" style="width:100%;"></div>
</div>
</div>
<div class="pure-u-4-5" style="height:90%;">
<div class="pure-g" style="height:100%;">
<div class="pure-u-1-1" style="height:20%;">
<div class="pure-g" style="height:100%;">
<div class="pure-u-1-6 news"><p>PIC</p></div>
<div class="pure-u-1-3 news"><p>TITLE</p></div>
<div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
<div class="pure-u-1-12 news"><p>ID</p></div>
</div>
</div>
<div class="pure-u-1-1" style="height:20%;">
<div class="pure-g" style="height:100%;">
<div class="pure-u-1-6 news"><p>PIC</p></div>
<div class="pure-u-1-3 news"><p>TITLE</p></div>
<div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
<div class="pure-u-1-12 news"><p>ID</p></div>
</div>
</div>
<div class="pure-u-1-1" style="height:20%;">
<div class="pure-g" style="height:100%;">
<div class="pure-u-1-6 news"><p>PIC</p></div>
<div class="pure-u-1-3 news"><p>TITLE</p></div>
<div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
<div class="pure-u-1-12 news"><p>ID</p></div>
</div>
</div>
<div class="pure-u-1-1" style="height:20%;">
<div class="pure-g" style="height:100%;">
<div class="pure-u-1-6 news"><p>PIC</p></div>
<div class="pure-u-1-3 news"><p>TITLE</p></div>
<div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
<div class="pure-u-1-12 news"><p>ID</p></div>
</div>
</div>
<div class="pure-u-1-1" style="height:20%;">
<div class="pure-g" style="height:100%;">
<div class="pure-u-1-6 news"><p>PIC</p></div>
<div class="pure-u-1-3 news"><p>TITLE</p></div>
<div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
<div class="pure-u-1-12 news"><p>ID</p></div>
</div>
</div>
</div>
</div>
<div class="pure-u-1-1 marquee">NEWSTICKER (jQuery marquee)</div>
</div>
And here is my CSS:
*{font-family:'Raleway', sans-serif;}
h1, h2, h3, p {color:#fff;}
body, html {
overflow:hidden;
height: 100%;
padding:0px;
}
div {
/*
border:1px solid;
margin:-1px;
*/
}
.news {
height:100%;
position:relative;
background:#444; background:rgba(0,0,0,.5);
margin:0px 0px 0px 0px;
border-radius:0px;
margin-bottom:0px;
}
.visible {
height:100%;
position:relative;
background:#444; background:rgba(0,0,0,.5);
margin:0px 0px 0px 0px;
border-radius:0px;
margin-bottom:0px;
}
.news p {
text-align: center;
vertical-align: middle;
margin:15px;
height:100%;
}
.marquee {
height:100%;
position:relative;
background:#444; background:rgba(0,0,0,.5);
margin:0px 0px 0px 0px;
padding:0px;
border-radius:0px;
margin-bottom:0px;
font-family:'Raleway', sans-serif;
color:#fff;
}
The result is this:
I read some threads for this problem but none of them seemed to work for me getting the div elements vertically centered.
I would also be glad if any of you finds some code improvement since this is my first time building a grid like this.
Thanks in advance

Answer 1

I'd keep it simple, no 3rd party.
This the basic frame work I'd use.
I would not make the images scalable. Too much work for those wimpy ARM processors in smartphones. I'd fix the width of the left column and pic div
I put temporary colored borders on the divs.
CSS
#col1{width:14%;position:absolute;top:0;left:0;}
#col2{width:84%;position:absolute;top:0;right:0;}
#logo{width:200px;height:200px;}
.row{width:100%;border:4px solid #000;display:inline-block;}
.pic{width:15%;border:1px solid #00f;display:inline-block;}
.title{width:30%;border:1px solid #f00;display:inline-block;}
.desc{width:40%;border:1px solid #0ff;display:inline-block;}
.id{width:10%;border:1px solid #f0f;display:inline-block;}
#marquee{height:6em;}<br>
HTML
<div id="col1">
<div id="logo"><img src="img/logo.png" alt="Logo"></div>
<div id="ad"><img src="img/ad.png" alt="AD" ></div>
</div>
<div id="col2">
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div id="marquee">Breaking News</div></div></div>
</div>

Answer 2

This is the CSS / HTML I use to center stuff vertically and horizontally:
<html>
<head>
<style type="text/css" media="screen">
.center-outter {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.center-middle {
display: table-cell;
vertical-align: middle;
}
.center-inner {
margin-left: auto;
margin-right: auto;
/*width:200px;*/
}
.whatever {
width:200px;
background:#efefef;
}
</style>
</head>
<body>
<div class="center-outter">
<div class="center-middle">
<div class="center-inner whatever">
<div>This should be centered vertically and horizontally</div>
</div>
</div>
</div>
</body>
</html>