← DEVELOPER 图层居中,灵活设定边与窗口的距离 2008.08.19 #CSS2 约 3 分钟 <!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> 完