CSS佈局解決方案
阿新 • • 發佈：2018-12-10
- 使用inline-block+text-align
-
原理：先將子框由塊級元素改變為行內塊元素，再通過設定行內塊元素居中以達到水平居中。
-
用法：對子框設定display:inline-block，對父框設定text-align:center。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent{ text-align: center; height: 400px; width: 400px; background-color: aquamarine; } .child{ display: inline-block; height: 200px; width: 200px; background-color: rebeccapurple;} </style> </head> <body> <div class="parent"> <div class="child">dome</div> </div> </body> </html>效果：
-
優缺點
- 優點:相容性好，甚至可以相容ie6、ie7
- 缺點:child裡的文字也會水平居中，可以在.child新增text-align:left;還原
2.使用table+margin
- 原理：先將子框設定為塊級表格來顯示（類似 ），再設定子框居中以達到水平居中。
- 用法：對子框設定display:table，再設定margin:0 auto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
height: 400px;
width: 400px;
background-color: #1bff2f;
}
.child{
display:table;
margin:0 auto;
height: 200px;
width: 200px;
background-color: #99522a;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">dome</div>
</div>
</body>
</html>
效果：
- 優缺點
- 優點：只設置了child，ie8以上都支援
- 缺點：不支援ie6、ie7,將div換成table
3.使用absolute+transform
- 原理：將子框設定為絕對定位，移動子框，使子框左側距離相對框左側邊框的距離為相對框寬度的一半，再通過向左移動子框的一半寬度以達到水平居中。當然，在此之前，我們需要設定父框為相對定位，使父框成為子框的相對框。
- 用法：對父框設定position:relative，對子框設定position:absolute，left:50%，transform:translateX(-50%)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
position: relative;
height: 400px;
width: 400px;
background-color: #ff795c;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 200px;
width: 200px;
background-color: #99337f;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">dome</div>
</div>
</body>
</html>
效果：
- 優缺點
1. 優點:居中元素不會對其他的產生影響
2. 缺點:transform屬於css3內容，相容性存在一定問題，高版本瀏覽器需要新增一些字首
4.**使用flex+margin **
- 原理：通過CSS3中的佈局利器flex將子框轉換為flex item，再設定子框居中以達到居中。
- 用法：先將父框設定為display:flex，再設定子框margin:0 auto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
display: flex;
height: 400px;
width: 400px;
background-color: #ffeb4f;
}
.child{
margin: 0 auto;
height: 200px;
width: 200px;
background-color: #5b9994;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">dome</div>
</div>
</body>
</html>
效果：
-
優缺點
缺點：低版本瀏覽器(ie6 ie7 ie8)不支援
5.**使用flex+justify-content **
-
原理：通過CSS3中的佈局利器flex中的justify-content屬性來達到水平居中。
-
用法：先將父框設定為display:flex，再設定justify-content:center。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent{ display: flex; justify-content: center; height: 400px; width: 400px; background-color: #acff2c; } .child{ height: 200px; width: 200px; background-color: #99522a; } </style> </head> <body> <div class="parent"> <div class="child">dome</div> </div> </body> </html>效果：
-
優缺點
- 優點:設定parent即可
- 缺點:低版本瀏覽器(ie6 ie7 ie8)不支援
垂直居中
1.**使用table-cell+vertical-align **
- 原理：通過將父框轉化為一個表格單元格顯示（類似
<td>和<th>），再通過設定屬性，使表格單元格內容垂直居中以達到垂直居中。 - 用法：先將父框設定為display:table-cell，再設定vertical-align:middle。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
display: table-cell;
vertical-align: middle;
height: 400px;
width: 400px;
background-color: #e8bf6a;
}
.child{
height: 200px;
width: 200px;
background-color: #99522a;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">dome</div>
</div>
</body>
</html>
效果：
-
優缺點
優點:相容性較好，ie8以上均支援
2.**使用absolute+transform **
- 原理：類似於水平居中時的absolute+transform原理。將子框設定為絕對定位，移動子框，使子框上邊距離相對框上邊邊框的距離為相對框高度的一半，再通過向上移動子框的一半高度以達到垂直居中。當然，在此之前，我們需要設定父框為相對定位，使父框成為子框的相對框。
- 用法：先將父框設定為position:relative，再設定子框position:absolute，top:50%，transform:translateY(-50%)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
position: relative;
height: 400px;
width: 400px;
background-color: #b3e82e;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 200px;
width: 200px;
background-color: #ffeb4f;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">dome</div>
</div>
</body>
</html>
效果：
- 優缺點
- 優點:居中元素不會對其他的產生影響
- 缺點:transform屬於css3內容，相容性存在一定問題，高版本瀏覽器需要新增一些字首
3.**使用flex+align-items **
- 原理：通過設定CSS3中的佈局利器flex中的屬性align-times，使子框垂直居中
- 用法：先將父框設定為display:flex，再設定align-items:center。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
display:flex;
align-items:center;
width: 400px;
height: 400px;
background-color: #ab8de8;
}
.child{
height: 200px;
width: 200px;
background-color: #ff6152;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">dome</div>
</div>
</body>
</html>
效果：
- 優缺點
- 優點:只設置parent
- 缺點:相容性存在一定問題
水平垂直居中
1.**使用absolute+transform **
-
原理：將水平居中時的absolute+transform和垂直居中時的absolute+transform相結合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent{ position:relative; width: 400px; height: 400px; background-color: #629755; } .child{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background-color: #ab8de8; } </style> </head> <body> <div class="parent"> <div class="child">dome</div> </div> </body> </html>效果：
-
優缺點
- 優點:child元素不會對其他元素產生影響
- 缺點:相容性存在一定問題
2.**使用inline-block+text-align+table-cell+vertical-align **
-
原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，將二者結合起來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent{ text-align:center; display:table-cell; vertical-align:middle; width: 400px; height: 400px; background-color: #979326; } .child{ display:inline-block; height: 200px; width: 200px; background-color: #e8bf6a; } </style> </head> <body> <div class="parent"> <div class="child">dome</div> </div> </body> </html>效果：
-
優缺點
優點:相容性較好
3.**使用flex+justify-content+align-items **
-
原理：通過設定CSS3佈局利器flex中的justify-content和align-items，從而達到水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent{ display:flex; justify-content:center; align-items:center; width: 400px; height: 400px; background-color: #ffeb4f; } .child{ height: 200px; width: 200px; background-color: #ff795c; } </style> </head> <body> <div class="parent"> <div class="child">dome</div> </div> </body> </html>效果：
-
優缺點
- 優點:只設置了parent
- 缺點:相容性存在一定問題
-
## 全屏佈局
全屏佈局的特點
- 滾動條不是全域性滾動條，而是出現在內容區域裡，往往是主內容區域
- 瀏覽器變大時，撐滿視窗
1.**使用position **
-
原理：將上下部分固定，中間部分使用定寬+自適應+兩塊高度一樣高。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body, .parent { margin: 0; height: 100%;