成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端面試中最常問(wèn)到的垂直水平居中問(wèn)題

ccj659 / 1100人閱讀

摘要：方法一和元素寬高未知的情況寬高未知方法二絕對(duì)定位和自身寬度一半，自身高度的一半已知寬高寬高已知方法三布局方法四被居中的元素是或者元素和元素方法五絕對(duì)定位和定高方法六父級(jí)高度和

方法一、 CSS3 transform和position(元素寬高未知的情況) 

    寬高未知



.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    position:relative;
}
.box span {
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

方法二、 絕對(duì)定位和margin-left:-自身寬度一半，margin-top: -自身高度的一半 (已知寬高) 

    寬高已知



.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    position: relative;
}
.box span {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    text-align: center;
    line-height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    margin-left: -50px;
    margin-top: -50px;
}

方法三、 css3 flex布局 

    




.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    display:flex;
    justify-content:center;
    align-items: center;
}
.box .child {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
}

方法四、 被居中的元素是inline或者inline-block元素 

    inline和inline-block元素



.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box .child {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
}

方法五、絕對(duì)定位和margin:auto 

    
定高




.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    position: relative;
}
.box .child {
    width: 100px;
    height: 100px;
    background: red;
    text-align: center;
    color: #fff;
    line-height: 100px;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

方法六、line-height: 父級(jí)高度和text-align: center 

    line-height



.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    line-height: 400px;
    text-align: center;
    font-size: 0;
}
.box .child {
    background: red;
    font-size: 14px;
    color: #fff;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52993.html

相關(guān)文章

  • 前端面試中最常問(wèn)到的垂直水平居中問(wèn)題

    摘要：方法一和元素寬高未知的情況寬高未知方法二絕對(duì)定位和自身寬度一半，自身高度的一半已知寬高寬高已知方法三布局方法四被居中的元素是或者元素和元素方法五絕對(duì)定位和定高方法六父級(jí)高度和 方法一、 CSS3 transform和position(元素寬高未知的情況) 寬高未知 .box { width: 400px; height: 400px; backgr...

    hatlonely 評(píng)論0 收藏0

  • 2019-我的前端面試題

    摘要：先說(shuō)下我面試情況，我一共面試了家公司。篇在我面試的眾多公司里，只有同城的面問(wèn)到相關(guān)問(wèn)題，其他公司壓根沒(méi)問(wèn)。我自己回答的是自己開(kāi)發(fā)組件面臨的問(wèn)題。完全不用擔(dān)心對(duì)方到時(shí)候打電話核對(duì)的問(wèn)題。 2019的5月9號(hào)，離發(fā)工資還有1天的時(shí)候，我的領(lǐng)導(dǎo)親切把我叫到辦公室跟我說(shuō)：阿郭，我們公司要倒閉了，錢是沒(méi)有的啦，為了不耽誤你，你趕緊出去找工作吧。聽(tīng)到這話，我虎軀一震，這已經(jīng)是第2個(gè)月沒(méi)工資了。 公...

    iKcamp 評(píng)論0 收藏0

  • 記錄一次杭州順網(wǎng)科技的面試過(guò)程

    摘要：以上是面試中筆試涉及到的知識(shí)點(diǎn)或者后面被問(wèn)到的只是點(diǎn)。也許是根據(jù)薪資和面試的等級(jí)來(lái)出題的。我剛面試完回家，吃了一個(gè)泡面，回憶下面試題。同時(shí)作為傳遞到構(gòu)造函數(shù)，執(zhí)行了一次讓構(gòu)造函數(shù)里面的屬性和方法賦值了一份給。 css 如何水平垂直居中，請(qǐng)盡量多說(shuō)幾種方法？很尷尬，我多次面試都被問(wèn)到這個(gè)問(wèn)題，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...

    shiguibiao 評(píng)論0 收藏0

  • 記錄一次杭州順網(wǎng)科技的面試過(guò)程

    摘要：以上是面試中筆試涉及到的知識(shí)點(diǎn)或者后面被問(wèn)到的只是點(diǎn)。也許是根據(jù)薪資和面試的等級(jí)來(lái)出題的。我剛面試完回家，吃了一個(gè)泡面，回憶下面試題。同時(shí)作為傳遞到構(gòu)造函數(shù)，執(zhí)行了一次讓構(gòu)造函數(shù)里面的屬性和方法賦值了一份給。 css 如何水平垂直居中，請(qǐng)盡量多說(shuō)幾種方法？很尷尬，我多次面試都被問(wèn)到這個(gè)問(wèn)題，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...

    caiyongji 評(píng)論0 收藏0

  • 我的前端面試

    摘要：前言這次找工作也面了好幾家公司，也通過(guò)了好幾家公司的面試，畢竟之前也準(zhǔn)備了一段時(shí)間，所以面試的時(shí)候心里也不是很虛。的代碼分割怎么實(shí)現(xiàn)的說(shuō)說(shuō)剛才提到的和的區(qū)別前端緩存怎么實(shí)現(xiàn)扯扯強(qiáng)緩存和協(xié)商緩存，重點(diǎn)問(wèn)了如何實(shí)現(xiàn)緩存二面就聊了項(xiàng)目。。。 前言 這次找工作也面了好幾家公司，也通過(guò)了好幾家公司的面試，畢竟之前也準(zhǔn)備了一段時(shí)間，所以面試的時(shí)候心里也不是很虛。 這里記錄一下面試過(guò)程中被問(wèn)到的問(wèn)題...

    meteor199 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<