HTML CSS examples for CSS Widget:Table Cell
Use display:table-cell to center content
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body, html { height:100%; width:100%; margin:0; padding:0; } body {<!-- ww w. j a va 2 s. c o m--> display:table; } #header { width:100%; height:3em; background:gray; } #vertical { display:table; width:100%; height:100%; } #horizontal { display:table; height:501px; width:501px; margin:11% auto 0% auto; background:gray; } #footer { height:3em; width:100%; background:gray; bottom:0px; display:table; } </style> </head> <body> <title>Lorem ipsum dolor </title> <div id="header"> Lorem ip </div> <div id="vertical"> <div id="horizontal"> Lorem ips </div> </div> <div id="footer"> Lorem ip </div> </body> </html>