1.代碼部分
- 塊級(jí)元素
<div class="parent">
<div class="child">child</div>
</div>
- 行內(nèi)元素
<div class="parent">
<span class="child">child</span>
</div>
2.水平居中
- 行內(nèi)元素居中 text-align:center;
.parent {
text-align: center;
}
- 塊級(jí)元素 margin:auto;
低版本瀏覽器兼容需設(shè)置 text-align:center;
.parent {
text-align: center;
}
.child {
margin: auto;
border: 1px solid red;
}
3.垂直居中
1.行內(nèi)元素（單行文字垂直居中） line-height=height
.parent {
height: 200px;
line-height: 200px;
border: 1px solid red;
}
2.塊級(jí)元素：絕對(duì)定位+margin（需要提前知道其尺寸）
- 優(yōu)點(diǎn)是兼容性好
- 缺點(diǎn)是需要提前知道其尺寸
.parent {
position: relative;
height: 200px;
}
.child {
width: 80px;
height: 40px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
3.塊級(jí)元素：絕對(duì)定位+transform
- 優(yōu)點(diǎn)是不需要提前知道其尺寸
- 缺點(diǎn)是兼容性不好
.parent {
position: relative;
height: 200px;
}
.child {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: blue;
}
4.塊級(jí)元素：絕對(duì)定位+margin: auto; （優(yōu)先選用）
- 優(yōu)點(diǎn)是不需要提前知道其尺寸，兼容性好
- 暫時(shí)未發(fā)現(xiàn)缺點(diǎn)
.parent {
position: relative;
height: 200px;
}
.child {
width: 80px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: blue;
}
5.塊級(jí)元素：padding
- 缺點(diǎn)是如果高度固定，需要七天計(jì)算尺寸（只在某些特定情況下適用）
.parent {
padding: 5% 0;
}
.child {
padding: 10% 0;
background: blue;
}
6.塊級(jí)元素：display: table-cell;
適用于多行文字居中處理
.parent {
width: 600px;
height: 200px;
border: 1px solid red;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
or
.parent {
height: 300px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
7.塊級(jí)元素：display: flex;
缺點(diǎn)是兼容性不好
.parent {
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;/*水平居中*/
}
.child {
background: blue;
}
8.塊級(jí)元素：偽元素
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
.child {
background: blue;
width: 100px;
height: 40px;
display: inline-block;
vertical-align: middle;
}
.parent::before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
9.塊級(jí)元素：calc()
不推薦
缺點(diǎn)是兼容性差行瑞，需要使用calc
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.child {
width: 100px;
height: 100px;
bckground: blue;
padding: calc((100% - 100px)/2);
background-clip: content-box;
}
10.塊級(jí)元素：display: inline-block;
html代碼：
<div class="parent">
<div class="child">child</div>
<div class="brother">brother</div>
</div>
CSS代碼：
.parent {
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
.child, .brother {
display: inline-block;
vertical-align: middle;
}
.child {
background: blue;
font-size: 12px;
}
.brother {
height: 400px;
font-size: 0;
}
11.table布局
不推薦，html中需要額外增加table等標(biāo)簽彰触，冗余且改變了html結(jié)構(gòu)
<table>
<tr>
<td align="center" valign="middle">content</td>
</tr>
</table>
