一、两种盒子模型
- 分别为：W3C盒子模型、IE盒子模型
- 不同点：
- 1、W3C盒子模型，宽度（width）指content部分的宽度。在IE盒子模型中，宽度（width）表示content+padding+border这三个部分的宽度
- 2、切换盒模型，W3C盒子模型：box-sizing: content-box，IE盒子模型：box-sizing: border-box
二、水平垂直居中有几种方式
方法一：
- 使用绝对定位（
position: absolute），然后（top: 50%;left: 50%;）， - 再去掉margin的宽度和高度，盒子模型宽高的一半（
margin-top: -150px;margin-left: -150px;），即可垂直居中
-优点：兼容性好， 缺点：你要知道盒子模型的宽高，不然不知道margain的宽高
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中</title> </head> <body> <div class="test"></div> </body> <style> .test { width: 300px; height: 300px; background-color: antiquewhite; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; } </style> </html>
方法二：
- 为了解决宽高问题，CSS3推出了
transform: translate(-50%, -50%)代替了margain，偏移的百分比是相对于自身大小，这就不用再推算margain的宽高啦~
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中</title> </head> <body> <div class="test"></div> </body> <style> .test { width: 300px; height: 300px; background-color: antiquewhite; position: absolute; top: 50%; left: 50%; /* margin-top: -150px; margin-left: -150px; */ transform: translate(-50%, -50%); } </style> </html>
方法三：
- 通过绝对定位（
position: absolute），然后再把上下左右（top: 0;left: 0;right: 0;bottom: 0;）全部为0，再用（margin: auto）水平垂直居中
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中</title> </head> <body> <div class="test"></div> </body> <style> .test { width: 300px; height: 300px; background-color: antiquewhite; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> </html>
方法四：
- 通过body弹性布局（
display: flex），定义body的元素垂直居中（align-items: center），定义body的元素水平居中（justify-content: center）
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中</title> </head> <body> <div class="test"></div> </body> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; /*垂直居中*/ align-items: center; /*水平居中*/ justify-content: center; } .test { background-color: antiquewhite; width: 300px; height: 300px; } </style> </html>
方法五：
- 通过相对定位（
position: relative），然后水平居中（margin: 0 auto），再来垂直居中（top: 50%;transform: translateY(-50%)）
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中</title> </head> <body> <div class="test"></div> </body> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .test { width: 300px; height: 300px; background-color: antiquewhite; position: relative; /*水平居中*/ margin: 0 auto; top: 50%; transform: translateY(-50%); } </style> </html>
