久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > HTML中讓元素居中的方法

        HTML中讓元素居中的方法

        來源:千鋒教育
        發(fā)布人:wjy
        時(shí)間: 2022-06-01 14:52:00 1654066320

        對(duì)于前端攻城獅,最重要的就是頁(yè)面,頁(yè)面的好看程度直接影響咱們的產(chǎn)品效益,所以,接下來呢我就給大家總結(jié)一下咱們前端攻城獅常用的居中效果的幾種實(shí)現(xiàn)方法:

        HTML中讓元素居中的方法

        ### 1.文字的垂直水平居中

        ```css
            <style>
                div{
                    width: 200px;
                    height: 200px;
                    background-color: greenyellow;
                    color: white;
                    /*行高等于盒子的高度,完成垂直居中*/
                    line-height: 200px;
                    /*元素的水平居中*/
                    text-align: center;
                }
            </style>

            <div>垂直水平居中</div>
        ```

        ps:以上方法僅針對(duì)文字的水平居中

        ### 2.盒子的垂直水平居中

        ```css
               .outer{
                   width: 300px;
                   height: 300px;
                   background-color: gainsboro;
                   text-align: center;
                   line-height: 100px;
                    /*由于觸發(fā)了BFC規(guī)范,可以解決margin塌陷,完成垂直的居中*/
                   overflow: hidden;
                   margin: 0 auto;
               }
               .inner{
                   width: 100px;
                   height: 100px;
                   background-color: pink;
                   margin: 100px auto;
               }

               <div class="outer">
                   <div class="inner">盒子居中</div>
               </div>
        ```

        ### 3.圖片在盒子中的居中

        ```text
             .box{
                  width: 300px;
                  height: 300px;
                  border: 1px dotted blue;
                  margin: 0 auto;
                  line-height: 400px;
                  text-align: center;
              }

             <div class="box">
                 <img src="./happy.png" alt="">
             </div>
        ```

        ps:圖片的特殊的文本類型,所以使用普通文本的垂直水平居中方法即可完成圖片的居中,需要注意圖片的大小一定要小于盒子的一半,否則效果不明顯。

        ### 4.使用定位實(shí)現(xiàn)盒子的居中

        ```css
            .outer{
                width: 300px;
                height: 300px;
                background-color: #fcfdcd;
                position: relative;
            }
            .inner{
                width: 100px;
                height: 100px;
                background-color: #00ffcd;
                text-align: center;
                line-height: 100px;
                position: absolute;
                top: 50%;
                left: 50%;
                /*由于定位是以元素左上角為起始點(diǎn),所以此時(shí)需要向上向左移動(dòng)盒子的大小的一半*/
                margin-top: -50px;
                margin-left: -50px;
            }

            <div class="outer">
                <div class="inner">定位居中</div>
            </div>
        ```

        ### 5.使用flex布局實(shí)現(xiàn)居中

        ```css
            .outer{
                width: 300px;
                height: 300px;
                background-color: #d3d60e;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .inner{
                color: #fff;
                width: 100px;
                height: 100px;
                background-color: #13b86b;
                text-align: center;
            }

            <div class="outer">
                <div class="inner">flex居中</div>
            </div>
        ```

        ### 6.網(wǎng)格布局實(shí)現(xiàn)居中

        ```css
                .outer {
                    width: 300px;
                    height: 300px;
                    background-color: gainsboro;
                    text-align: center;
                    line-height: 100px;
                    display: grid;
                    grid-template-columns: repeat(3,100px);
                    grid-template-rows: repeat(3,100px);
                }

                .inner {
                    width: 100px;
                    height: 100px;
                    background-color: pink;

                }

            <div class="outer">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div class="inner">網(wǎng)格居中</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        ```

        ### 7.元素在當(dāng)前瀏覽器中垂直水平居中

        ```css
            body{
                background-color:gray;
            }
            .box {
                    width: 400px;
                    height: 300px;
                    line-height: 300px;
                    text-align: center;
                    background-color: orange;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -200px;
                    margin-top: -150px;
             }

             <div class="box">瀏覽器中垂直水平居中</div>
        ```

        ### 說明:以上幾種方法是對(duì)于頁(yè)面中的布局中較為常用的方法,后期還會(huì)持續(xù)更新,敬請(qǐng)關(guān)注。更多關(guān)于“html5培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的提升班,高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        今日頭條展現(xiàn)量是什么?今日頭條展現(xiàn)量規(guī)則分析

        目前頭條用戶會(huì)發(fā)現(xiàn)微頭條和問答新增了“展現(xiàn)量”指標(biāo)。那么這個(gè)今日頭條展現(xiàn)量是什么意思呢?如何提高呢?下面千鋒教育小編就和大家說...詳情>>

        2023-09-19 09:15:47
        我想直播帶貨去哪里找貨源一件代發(fā)

        現(xiàn)在直播帶貨是一個(gè)非常火的行業(yè),越來越多的人進(jìn)入到這個(gè)圈子,但是,認(rèn)真地說,直播帶貨能不能賺到錢還是要看自己。雖然這一行業(yè)火,收入高,...詳情>>

        2023-09-19 08:41:02
        入駐短視頻mcn需要多少錢?有哪些費(fèi)用?

        眾所周知,現(xiàn)在短視頻成了很多人的自媒體創(chuàng)業(yè)道路之一,越來越多人喜歡在網(wǎng)上消遣時(shí)間,購(gòu)物等。也有很多優(yōu)秀的博主去做出很多新的內(nèi)容,那么入...詳情>>

        2023-09-19 08:12:47
        短視頻帶貨應(yīng)該注冊(cè)什么公司?需要什么資料?

        短視頻大家應(yīng)該都非常熟悉,現(xiàn)在很多人都喜歡在閑暇的時(shí)候刷短視頻,短視頻平臺(tái)也開始了直播帶貨,商家也都開始創(chuàng)業(yè)了,那么短視頻帶貨需要營(yíng)業(yè)...詳情>>

        2023-09-19 08:09:31
        怎樣投抖加不花錢?別人能看出來嗎?

        抖音一些視頻為了獲取更多點(diǎn)擊,一些博主機(jī)會(huì)投抖加。其實(shí)抖加的投放沒有絕對(duì)正確的方法,而不同賬號(hào)和視頻投放的策略都是不一樣的,不過一般情...詳情>>

        2023-09-19 08:00:10
        開班信息
        北京校區(qū)
        • 北京校區(qū)
        • 大連校區(qū)
        • 廣州校區(qū)
        • 成都校區(qū)
        • 杭州校區(qū)
        • 長(zhǎng)沙校區(qū)
        • 合肥校區(qū)
        • 南京校區(qū)
        • 上海校區(qū)
        • 深圳校區(qū)
        • 武漢校區(qū)
        • 鄭州校區(qū)
        • 西安校區(qū)
        • 青島校區(qū)
        • 重慶校區(qū)
        • 太原校區(qū)
        • 沈陽(yáng)校區(qū)
        • 南昌校區(qū)
        • 哈爾濱校區(qū)
        丁青县| 盐池县| 陈巴尔虎旗| 合作市| 庄浪县| 响水县| 中西区| 义马市| 迭部县| 南京市| 双江| 许昌县| 措美县| 遵义县| 闸北区| 汝南县| 漠河县| 寻乌县| 扎兰屯市| 西安市| 博客| 沛县| 东光县| 安康市| 永登县| 噶尔县| 黔西| 林西县| 麻栗坡县| 五河县| 大悟县| 金坛市| 东宁县| 长春市| 南丹县| 柳林县| 岗巴县| 台东县| 中西区| 怀柔区| 边坝县|