1、水平居中
方法一：子元素設定margin:0 auto；
但有其侷限性：只能塊級元素，已知寬度，父級元素有寬度的使用才有效。
方法二：父元素text-align：center + 子元素display：inline-block
在父級元素上設定text-align：center;將需要居中的元素設定為inline-block
方法三：position絕對定位
子絕父相，子元素設定
position:absolute;(同時設定父級元素relative)
left:50%;(包括了元素本身的寬度)
transform:translateX(-50%);
複製程式碼方法四：flex彈性佈局之justify-content
父元素設定！！(但是得子元素有寬高才行，純文字不可)
display:flex;
justify-content:center;`
複製程式碼垂直居中
方法一：設定父元素height和line-height值相同
！注意：只適用於文字
方法二：只設定父元素table-cell + vertical-align
！注意：父子元素都得設定寬高！
display: table-cell;
vertical-align: middle;
複製程式碼方法三：父元素設定display：flex 子元素設定align-self：center
方法四：父元素設定display:flex;justify-content：center;align-items: center;
display:flex;
justify-content:center;
align-items: center;
複製程式碼方法五：使用絕對定位和負邊距
position：absolute； //子絕父相
top: 50%; //各設定為50%
left: 50%;
margin-left: -100px; //為寬高的一半
margin-top: -100px; //為寬高的一半
height: 200px;
width: 200px;
background: yellow;
複製程式碼BFC 兩欄佈局
左側塊浮動到左邊，但是因為是浮動塊，右側塊高度一旦超過左側塊後文字就會出現在左側的下方，因為沒有塊把它擋住。
解決辦法： 讓右側塊變為BFC文字就不會橫過去。因為BFC元素不與Float元素相重疊。
三欄-浮動方案
.left,
.right,
.center {
height: 200px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.right {
background-color: blue;
width: 300px;
float: right;
}
.center {
background-color: orange;
width: 100%;
}
複製程式碼
三欄佈局-flex
.left,
.right,
.center {
min-height: 100px;
}
.wrapper {
display: flex;
}
.left{
background-color: red;
width: 300px;
}
.center {
background-color: orange;
flex: 1;
}
.right {
background-color: blue;
width: 300px;
}
複製程式碼
三欄-絕對定位
aside {
position: absolute;
width: 300px;
min-height: 100px;
}
aside.left {
left: 0;
background-color: red;
}
aside.right {
right: 0;
background-color: blue;
}
main.center {
position: absolute;
left: 300px;
right: 300px;
background-color: orange;
}
複製程式碼
grid網格佈局
.wrapper {
display: grid;
width: 100%;
grid-template-columns: 300px 1fr 300px;
}
.left {
background-color: red;
}
.center {
background-color: orange;
}
.right {
background-color: blue;
}
複製程式碼表格佈局
.wrapper {
display: table;
width: 100%;
}
.left,
.right,
.center {
min-height: 100px;
display: table-cell;
}
.left {
width: 300px;
background-color: red;
}
.center {
background-color: orange;
}
.right {
background-color: blue;
width: 300px;
}
</style>
複製程式碼
雙飛翼佈局
原理：主體元素上設定左右邊距，預留兩翼位置。左右兩欄使用浮動和負邊距歸位。
左翅left有200px,右翅right..220px.. 身體main自適應未知
1.html程式碼中，main要放最前邊，left right
2.將main left right 都float:left
3.將main佔滿 width:100%
4.此時main佔滿了，所以要把left拉到最左邊，使用margin-left:-100% 同理 right使用margin-left:-220px
（這時可以直接繼續上邊聖盃佈局的步驟，也可以有所改動）
5.main內容被覆蓋了吧，除了使用外圍的padding，還可以考慮使用margin。
給main增加一個內層div-- main-inner, 然後margin:0 220px 0 200px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>雙飛翼佈局</title>
<style>
.left,
.right,
.main {
min-height: 200px;
}
.left {
width: 200px;
background-color: thistle;
}
.main {
background: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 雙飛翼佈局重點 */
.left,
.main,
.right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin-left: 200px;
margin-right: 300px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -300px;
}
</style>
</head>
<body>
<div class="main"><div class="main-inner">中心區</div></div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
複製程式碼
聖盃佈局
要求：三列布局；中間寬度自適應，兩邊內容定寬。
好處：重要的內容放在文件流前面可以優先渲染
原理：利用相對定位、浮動、負邊距佈局，而不新增額外標籤
實現方式：
main部分首先要放在container的最前部分。然後是left,right
1.將三者都 float:left , 再加上一個position:relative (因為相對定位後面會用到）
2.main部分 width:100%佔滿
3.此時main佔滿了，所以要把left拉到最左邊，使用margin-left:-100%
4.這時left拉回來了，但會覆蓋main內容的左端，要把main內容拉出來，所以在外圍container加上 padding:0 220px 0 200px
5.main內容拉回來了，但left也跟著過來了，所以要還原，就對left使用相對定位 left:-200px 同理，right也要相對定位還原 right:-220px
6.到這裡大概就自適應好了。如果想container高度保持一致可以給left main right都加上min-height:130px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>實現三欄水平佈局之聖盃佈局</title>
<style type="text/css">
/*基本樣式*/
.left, .right, .main {
min-height: 300px;
}
.left {
width: 200px;
background-color:thistle;
}
.main {
background-color: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 聖盃佈局關鍵程式碼 */
.left, .main, .right {
float: left;
position: relative;
}
.main {
width: 100%;
}
.container {
padding-left: 200px;
padding-right: 300px;
}
.left {
margin-left: -100%;
left: -200px;
}
.right {
margin-left: -300px;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
複製程式碼一個高度自適應的 div，裡面有兩個 div，一個高度 100px，希望另一個填滿剩下的高度
方案 1： .sub { height: calc(100%-100px); }
方案 2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
方案 3： .container { display:flex; flex-direction:column; } .sub { flex:1; }