前端面試重點(diǎn)——居中問題
在頁面布局開發(fā)中寝贡，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點(diǎn)。本文匯總一些常見的居中方式以及一些注意點(diǎn)玄渗，權(quán)當(dāng)學(xué)習(xí)筆記。
[TOC]
一譬淳、水平居中
1. inline-block + text-align
確保子元素是行內(nèi)塊級元素后直焙，給父元素 text-align: center; 這種情況對于子元素定寬或者不定寬都生效。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
text-align: center;
}
.child {
display: inline-block;
}
2. table + margin
此時利用table的寬度是內(nèi)容的寬度吞琐，且table可以使用margin
<div class="parent">
<div class="child">child</div>
</div>
.child {
display: table;
margin: 0 auto;
}
3. absolute + transform
確定父元素 相對定位后捆探，將子元素通過絕對定位在父元素內(nèi)實現(xiàn)居中。該方法適用于子元素定寬或者不定寬站粟，萬能方法黍图。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: translateX(-50%);
}
4. flex + justify-content
彈性布局（flex布局）也是常用來居中的方式，只需要給父級元素添加彈性布局格式奴烙，同時設(shè)置橫軸對齊方式j(luò)ustiify-content來設(shè)置居中助被。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
display: flex;
justify-content: center;
}
在選擇居中對齊的時候，也可以通過考慮子元素的寬度是否確定切诀，如果寬度確定恰起，也可通過：margin: 0 auto;實現(xiàn)水平居中。
注意點(diǎn)：
- text-align用來設(shè)置元素中的的文本行內(nèi)元素的對齊方式趾牧；
- text-align只對行內(nèi)元素有效检盼，對塊元素?zé)o效，不能設(shè)置塊元素的對齊方式翘单；
二吨枉、垂直居中
1. line-height = height （只適用于單行內(nèi)行內(nèi)元素）
這種方法在設(shè)置單行塊的時候特別有效蹦渣，需要知道父元素高度。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
height: 100px;
}
.child {
line-height: 100px;
}
2. table-cell + vertical-align（單行貌亭，多行都可居中）
利用表格單元格的特性柬唯，單元格內(nèi)支持居中。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
display: table-cell;
vertical-align: middle;
}
3. absolute + transform
父元素相對布局圃庭，子元素絕對布局锄奢，適用很多場景。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transfrom: translateY(-50%);
}
4. flex + align-item
flex布局剧腻，通過縱向?qū)Ralign-item設(shè)置交叉軸對齊拘央。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
display: flex;
align-items: center;
}
三、水平垂直居中
將上面的水平居中方法和垂直居中方法結(jié)合起來就可以實現(xiàn)水平垂直居中书在。
1. inline-block + text-align + table-cell + vertical-align
<div class="parent">
<div class="child">child</div>
</div>
.parent {
diaplay: teable-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
}
2. margin: auto
已知寬高的元素父元素相對定位灰伟，子元素絕對定位。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
positon: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
3. transform + translate
不管寬高是否給定儒旬，都可以使用父元素相對定位栏账，子元素絕對定位。（未知寬高可能是行內(nèi)元素）
<div class="parent">
<div class="child">child</div>
</div>
.parent {
positon: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4. flex
flex布局栈源，設(shè)置主軸和交叉軸的對齊方式挡爵。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
注意點(diǎn)：
- 行內(nèi)元素設(shè)置寬高是無效的，可以通過設(shè)置line-height實現(xiàn)行內(nèi)元素高度的設(shè)置甚垦，行內(nèi)元素設(shè)置margin或者padding只有左右有效了讨，上下無效。
- flex(ie 9以上才支持)的兼容性寫法：
{
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
（完）
