前端面試重點之--居中問題

前端面試重點——居中問題

在頁面佈局開發中，居中問題是咱們常常碰到的問題，掌握居中問題對於解決頁面佈局很是重要，同時它也是常見的面試重點。本文彙總一些常見的居中方式以及一些注意點，權當學習筆記。

[toc]

1、水平居中

1. inline-block + text-align

確保子元素是行內塊級元素後，給父元素 text-align: center; 這種狀況對於子元素定寬或者不定寬都生效。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

2. table + margin

此時利用table的寬度是內容的寬度，且table可使用margin

<div class="parent">
    <div class="child">child</div>
</div>

.child {
    display: table;
    margin: 0 auto;
}

3. absolute + transform

肯定父元素 相對定位後，將子元素經過絕對定位在父元素內實現居中。該方法適用於子元素定寬或者不定寬，萬能方法。

<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佈局）也是經常使用來居中的方式，只須要給父級元素添加彈性佈局格式，同時設置橫軸對齊方式justiify-content來設置居中。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: flex;
    justify-content: center;
}

在選擇居中對齊的時候，也能夠經過考慮子元素的寬度是否肯定，若是寬度肯定，也可經過：margin: 0 auto;實現水平居中。

注意點：

• text-align用來設置元素中的的文本行內元素的對齊方式；
• text-align只對行內元素有效，對塊元素無效，不能設置塊元素的對齊方式；

2、垂直居中

1. line-height = height （只適用於單行內行內元素）

這種方法在設置單行塊的時候特別有效，須要知道父元素高度。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    height: 100px;
}
.child {
    line-height: 100px;
}

2. table-cell + vertical-align（單行，多行均可居中）

利用表格單元格的特性，單元格內支持居中。

<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佈局，經過縱向對齊align-item設置交叉軸對齊。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: flex;
    align-items: center;
}

3、水平垂直居中

將上面的水平居中方法和垂直居中方法結合起來就能夠實現水平垂直居中。

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

無論寬高是否給定，均可以使用父元素相對定位，子元素絕對定位。（未知寬高多是行內元素）

<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佈局，設置主軸和交叉軸的對齊方式。

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

注意點：

1. 行內元素設置寬高是無效的，能夠經過設置line-height實現行內元素高度的設置，行內元素設置margin或者padding只有左右有效，上下無效。
2. flex(ie 9以上才支持)的兼容性寫法：

{
    display: -webkit-box;
    display: -webkit-flex;
     display: -moz-flex; 
      display: -ms-flexbox; 
      display: flex;
}

（完）