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

資訊專欄INFORMATION COLUMN

html的幾種水平垂直居中的方式（基礎(chǔ)）

Songlcy / 3583人閱讀

摘要：前言我們?cè)诰帉戱R過程中，想必大家對(duì)水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。

前言
我們?cè)诰帉戱R過程中，想必大家對(duì)水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。

第一種方法






    
d第一種





   .Centered1{
            background-color: #800070;
            width: 100%;
            height:500px;
            position: relative;
        }
    .Centered1 p{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            line-height: 200px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 0;
            right:0;
            top: 0;
            margin: auto;
        }

第二種方法






    
d第二種





/*第二種方法水平垂直居中*/
    .Centered2{
            background-color: #ef8518;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered2 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:red;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top:50%;
            margin-left:-100px;
            margin-top: -100px;
        }

第三種方法






    
d第三種





/*第三種方法水平垂直居中*/
    .Centered3{
            background-color: dimgrey;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered3 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:darkorange;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }

第四種方法






    
d第四種





/*第四種方法水平垂直居中,老版本flex布局*/
    .Centered4{
            background-color: #FF4444;
            width: 100%;
            height: 500px;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
    .Centered4 p {
            width: 200px;
            height: 200px;
            background-color:cadetblue;
            line-height: 200px;
            text-align: center;
        }

第五種方法






    
d第五種





/*第五種方法水平垂直居中,新版本的flex水平垂直居中*/
    .Centered5{
            background-color: darkslateblue;
            width: 100%;
            height: 500px;
            display: flex;
            justify-content:center;
            align-items: center;
        }
    .Centered5 p {
            width: 200px;
            height: 200px;
            background-color:fuchsia;
            line-height: 200px;
            text-align: center;
        }

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

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

相關(guān)文章

  • 使一個(gè)div垂直+水平居中的幾種方法

    摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個(gè)問題思路絕對(duì)定位居中原始版這個(gè)是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層相對(duì)定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

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

  • 前端培訓(xùn)-初級(jí)階段（13、18）

    摘要：年月歐洲計(jì)算機(jī)制造商協(xié)會(huì)發(fā)表了標(biāo)準(zhǔn)，它是的一個(gè)擴(kuò)延，它也被稱為年月首版年月日截止發(fā)布日期，的官方名稱是，國(guó)際意在更頻繁地發(fā)布包含小規(guī)模增量更新的新版本，下一版本將于年發(fā)布，命名為。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的...

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

  • (面試題)垂直居中的幾種實(shí)現(xiàn)方式

    摘要：尤其是在實(shí)際頁(yè)面中，有很多特殊的場(chǎng)景，導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例一個(gè)的在一個(gè)水平垂直居中，用實(shí)現(xiàn)。首先定義元素層和垂直居中無關(guān)的樣式直接定義在里。 相比較水平居中，垂直居中比較復(fù)雜點(diǎn)。尤其是在實(shí)際頁(yè)面中，有很多特殊的場(chǎng)景，導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例：一個(gè)200*2...

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

  • CSS垂直居中，你會(huì)多少種寫法？

    摘要：如果我們直接可以計(jì)算出正確的和值，豈不是一次到位函數(shù)正有此功能，當(dāng)然我們需要知道子元素的寬高效果是一個(gè)作用于內(nèi)聯(lián)元素的屬性。內(nèi)聯(lián)元素的特性是會(huì)和其它內(nèi)聯(lián)元素或者文字在同一行顯示，但是默認(rèn)情況下是與父元素基線對(duì)齊的。 ??CSS控制居中是前端開發(fā)中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

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

  • web開發(fā)常用的幾種居中形式

    摘要：一水平居中二水平垂直居中三針對(duì)文本內(nèi)容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產(chǎn)生同樣效果的原因移步要居中的元素沒有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。 一 水平居中二 水平垂直居中三 針對(duì)文本內(nèi)容的垂直居中 一 水平居中 要居中的元素A有width屬性 給元素A添加 margin：0,auto；(代碼演示) showImg(h...

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

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

0條評(píng)論

閱讀需要支付1元查看
<