<div id="wrapper">
<div id="cell">
<div class="content">
  Content goes here</div>
</div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

<div class="content">
Content goes here</div>

#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}

<div id="floater">
<div id="content">
  Content here</div>
</div>

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

<div id="content">
Content here</div>

#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
}

<div id="content">
Content here</div>

#content {height:100px; line-height:100px;}

<div id="top">
<h1>Title</h1>
</div>
<div id="content">
Content Here</div>

#floater {float:left; height:50%; margin-bottom:-120px;}
#top  {float:right; width:100%; text-align:center;}
#content {clear:both; height:240px; position:relative;}

#floater/*把 content 置中*/
#contred/*centre 盒*/
#side
#logo
#nav/*無序列表*/
#content
#bottom/*放置版權等*/

A Centred Company
<div id="centered">
<div id="side">
<div id="logo">
   <strong><span>A</span> Company</strong></div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="content">
<h1>Page Title</h1>
Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.
   Energistically simplify impactful niche markets via enabled imperatives.
   Holisticly predominate premium innovation after compelling scenarios.
   Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products.
   Distinctively syndicate standards compliant schemas before robust vortals.
   Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
<h2>Heading 2</h2>
Efficiently embrace customized web-readiness rather than customer directed processes.
   Assertively grow cross-platform imperatives vis-a-vis proactive technologies.
   Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.
   Conveniently streamline competitive strategic theme areas with focused e-markets.
   Phosfluorescently syndicate world-class communities vis-a-vis value-added markets.
   Appropriately reinvent holistic services before robust e-services.</div>
</div>
<div id="bottom">
Copyright notice goes here</div>

html, body {
margin:0; padding:0;
height:100%;
}

body {
background:url('page_bg.jpg') 50% 50% no-repeat #FC3;
font-family:Georgia, Times, serifs;
}

#floater {
position:relative; float:left;
height:50%; margin-bottom:-200px;
width:1px;
}

#centered {
position:relative; clear:left;
height:400px; width:80%; max-width:800px; min-width:400px;
margin:0 auto;
background:#fff;
border:4px solid #666;
}

#bottom {
position:absolute;
bottom:0; right:0;
}

#nav {
position:absolute; left:0; top:0; bottom:0; right:70%;
padding:20px; margin:10px;
}

#content {
position:absolute; left:30%; right:0; top:0; bottom:0;
overflow:auto; height:340px;
padding:20px; margin:10px;
}

#nav ul {
list-style:none;
padding:0; margin:20px 0 0 0; text-indent:0;
}

#nav li {
padding:0; margin:3px;
}

#nav li a {
display:block; background-color:#e8e8e8;
padding:7px; margin:0;
text-decoration:none; color:#000;
border-bottom:1px solid #bbb;
text-align:right;
}

#nav li a::after {
content:'»'; color:#aaa; font-weight:bold;
display:inline; float:right;
margin:0 2px 0 5px;
}

#nav li a:hover, #nav li a:focus {
background:#f8f8f8;
border-bottom-color:#777;
}

#nav li a:hover::after {
margin:0 0 0 7px; color:#f93;
}

#nav li a:active {
padding:8px 7px 6px 7px;
}