vertical and horizontal div centering and efficient css - css

Question

pretty new to web design and I thought it would be a good idea to create a basic mockup of a website with a header, a paragraph and a sticky footer just to ensure I've got some basics down :)
I'm wondering how to center the .paragraph div vertically as well as horizontally and also if there are any obvious problems or inefficiency with the code that I should be aware of. I just want to make sure I can code a basic layout without developing bad habits.
So I ended up with this css:
.head {
margin: auto;
height: 100%;
width: 100%;
background-color: #000;
color:white;
text-align:center;}
body {
background-color:#99C;
}
.h1 {
font-size:50px;
font-family:Georgia, "Times New Roman", Times, serif;
padding:30px;
}
.paragraph {
color:#FFF;
text-align:center;
background-color:#333;
width:35%;
margin:auto;
margin-top:165px;
padding:10px;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
/* equal to footer height */
margin-bottom: -70px;
}
.wrapper:after {
content: "";
display: block;
}
.site-footer, .wrapper:after {
/* .push must be the same height as footer */
height: 70px;
}
.site-footer {
background: orange;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
line-height:70px;
}
And here's how it looks:
Thanks in advance!!!
Adam H

Answer 1

what about when you need to change the header/footer height for some reason?
you'll need to alter more than one rule in your CSS to keep your layout as you want it.
Here's the same layout that you desire, without fixing any height, using pure CSS.
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>I'm in the header</p>
<p>my height is not fixed</p>
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
<p>I'm in the footer</p>
<p>my height is not fixed</p>
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
<div>
<p>I'm in the content</p>
<p>I always span the rest of the page.</p>
<p>If my content is bigger than my available space, I will scroll</p>
<p>This Layout has been tested on: IE10, FireFox, Chrome, Safari, Opera using Pure CSS only</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Content
{
height: 100%;
overflow: auto;
text-align: center;
font-size: 0;
/*for demonstration only*/
background-color: #90adc1;
}
.Content:after
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Content > div
{
font-size: medium;
display: inline-block;
vertical-align: middle;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}
Notice: the only Downside in my approach, is that I have to construct the footer before the content (in the HTML).