盒子垂直水平對齊
-
第一種：已知盒子具體寬高,利用瀏覽器容錯機制居中，和第三種類似
-
代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; background: red; position: fixed; left: 0px; right: 0px; bottom: 0px; top: 0px; margin: auto; /*利用的是瀏覽器的容錯機制*/ } </style> </head> <body> <div></div> </body> </html>
-
-
第二種
-
代碼：已知盒子大小，進行位置微調居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; background: red; position: fixed; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } </style> </head> <body> <div></div> </body> </html>
-
-
第三種:不知道寬度，利用瀏覽器自動識別計算居中
-
代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ height: 200px; background: red; position: fixed; left: 100px; right: 100px; top: 0px; bottom: 0px; margin: auto; } </style> </head> <body> <div></div> </body> </html>
-
-
第四種：已知寬高，利用calc自動計算居中，是微調的優化。
-
代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ height: 200px; width: 200px; background: red; position: fixed; left: -webkit-calc(50% - 100px); top: -webkit-calc(50% - 100px); } </style> </head> <body> <div></div> </body> </html>
-