图层居中，可灵活设定边与窗口的距离

图层居中，可灵活设定边与窗口的距离作者：ONEBOYS

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> *{margin:0; padding:0;} html,body{width:100%; height:100%;overflow:hidden;} body{margin:100px 0 0 100px;position:relative;} .wrap{height:100%; width:100%; background:#ccc; position:absolute; bottom:200px; right:200px;} .cont{margin:200px 0 0 200px;} </style> </head> <body> <div class="wrap"><div class="cont">1阿斯顿就恢复2阿斯顿就恢复3阿斯顿就恢复4阿斯顿就恢复5阿斯顿就恢复6阿斯顿就恢复7阿斯顿就恢复8阿斯顿就恢复9阿斯顿就恢复10阿斯顿就恢复11阿斯顿就恢复12阿斯顿就恢复13阿斯顿就恢复14阿斯顿就恢复15阿斯顿就恢复16阿斯顿就恢复</div></div> </body> </html>

上面这种方法，应该说很少会被用上。

而下面这个则比较常见，
不过，它是对已确定尺寸的元素的水平与垂直居中。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <style type="text/css"> body{padding:0;margin:0;background:#f4dcd8;} #Main{position:absolute;width:500px;height:400px;left:50%; top:50%;margin:-200px 0 0 -250px;background:#87b6bc;} </style> <body> <div id="Main"> TEST </div> </html>