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

張遷發布于2019-08-30 11:23 / 3227人閱讀

摘要：前端面試重點居中問題在頁面布局開發中，居中問題是我們經常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點。已知寬高的元素父元素相對定位，子元素絕對定位。以上才支持的兼容性寫法完

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

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

[toc]

一、水平居中 1. inline-block + text-align

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


    child

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

2. table + margin

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


    child

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

3. absolute + transform

確定父元素 相對定位后，將子元素通過絕對定位在父元素內實現居中。該方法適用于子元素定寬或者不定寬，萬能方法。


    child

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: translateX(-50%);
}

4. flex + justify-content

彈性布局（flex布局）也是常用來居中的方式，只需要給父級元素添加彈性布局格式，同時設置橫軸對齊方式justiify-content來設置居中。


    child

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

在選擇居中對齊的時候，也可以通過考慮子元素的寬度是否確定，如果寬度確定，也可通過：margin: 0 auto;實現水平居中。

注意點：

text-align用來設置元素中的的文本行內元素的對齊方式；

text-align只對行內元素有效，對塊元素無效，不能設置塊元素的對齊方式；

二、垂直居中 1. line-height = height （只適用于單行內行內元素）

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


    child

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

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

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


    child

.parent {
    display: table-cell;
    vertical-align: middle;
}

3. absolute + transform

父元素相對布局，子元素絕對布局，適用很多場景。


    child

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

4. flex + align-item

flex布局，通過縱向對齊align-item設置交叉軸對齊。


    child

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

三、水平垂直居中

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

1. inline-block + text-align + table-cell + vertical-align


    child

.parent {
    diaplay: teable-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}

2. margin: auto

已知寬高的元素父元素相對定位，子元素絕對定位。


    child

.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

3. transform + translate

不管寬高是否給定，都可以使用父元素相對定位，子元素絕對定位。（未知寬高可能是行內元素）


    child

.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. flex

flex布局，設置主軸和交叉軸的對齊方式。


    child

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

注意點：

行內元素設置寬高是無效的，可以通過設置line-height實現行內元素高度的設置，行內元素設置margin或者padding只有左右有效，上下無效。

flex(ie 9以上才支持)的兼容性寫法：

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

（完）

GPU云服務器云服務器 java面試之io 回顯居中問題面試問題 javaee面試問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114965.html

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

摘要：前端面試重點居中問題在頁面布局開發中，居中問題是我們經常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點。已知寬高的元素父元素相對定位，子元素絕對定位。以上才支持的兼容性寫法完前端面試重點——居中問題在頁面布局開發中，居中問題是我們經常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點。本文匯總一些常見的居中方式以及一些注意點，權當...

AJie 2019-08-02 15:31 評論0 收藏0
查漏補缺 - 收藏集 - 掘金

摘要：醞釀許久之后，筆者準備接下來撰寫前端面試題系列文章，內容涵蓋瀏覽器框架分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。這道題--致敬各位10年阿里的前端開發 - 掘金很巧合，我在認識了兩位同是10年工作經驗的阿里前端開發小伙伴，不但要向前輩學習，我有時候還會選擇另一種方法逗逗他們，拿了網上一道經典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1...

YuboonaZhang 2019-08-29 12:56 評論0 收藏0
面試寶典

摘要：有談談面試與面試題對于前端面試的一些看法。動態規劃算法的思想及實現方法幫大家理清動態規劃的解決思路以及原理方法前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。極客學院前端練習題道練習題，面試季練練手。由數據綁定和排序引入的幾個 JavaScript 知識點在 JavaScript 的數據綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

neu 2019-08-29 14:00 評論0 收藏0
拒信收割機の前端面經（CVTE，唯品會，百度）

摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...

yzd 2019-08-29 11:23 評論0 收藏0