1.css实现居中
缺点：需要提前知道元素的宽度和高度。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> .box{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; border:1px solid #000; background:red; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ } </style> </head> <body> <p class="box"> </p> </body> </html>
2、css3实现水平垂直居中
注意：无论元素的尺寸是多少，都可以居中。不过ie8以上才兼容这种写法，移动端可忽略。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> .box{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; border:1px solid #000; background:red; transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */ } </style> </head> <body> <p class="box"> </p> </body> </html>
3、margin：auto实现居中
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> .box{ width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border:1px solid #000; background:red; margin: auto; /* 有了这个就自动居中了 */ } </style> </head> <body> <p class="box"> </p> </body> </html>
更多绝对定位元素的水平垂直居中的方法。