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

<!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"> <p>昔我往矣，杨柳依依。 <p>今我来思，雨雪霏霏。 <p>行道迟迟，载渴载饥。 <p>我心伤悲，莫知我哀！ </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;} p{padding: 0;margin: 0} </style> <body> <div class="main"> <p>采薇采薇，薇亦作止。曰归曰归，岁亦莫止。 <p>靡室靡家，玁狁之故。不遑启居，玁狁之故。 <p>采薇采薇，薇亦柔止。曰归曰归，心亦忧止。 <p>忧心烈烈，载饥载渴。我戍未定，靡使归聘。 <p>采薇采薇，薇亦刚止。曰归曰归，岁亦阳止。 <p>王事靡盬，不遑启处。忧心孔疚，我行不来。 <p>彼尔维何？维常之华。彼路斯何？君子之车。 <p>戎车既驾，四牡业业。岂敢定居？一月三捷。 <p>驾彼四牡，四牡骙骙。君子所依，小人所腓。 <p>四牡翼翼，象弭鱼服。岂不日戒，玁狁孔棘。 <p>昔我往矣，杨柳依依。今我来思，雨雪霏霏。 <p>行道迟迟，载渴载饥。我心伤悲，莫知我哀！ </div> </html>