整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML技巧篇:實(shí)現(xiàn)元素水平與垂直居中的幾種方式

          篇文章主要給大家介紹一下如何使用html+css實(shí)現(xiàn)元素的水平與垂直居中效果,這也是我們網(wǎng)頁在編碼制作中會經(jīng)常用到的問題。

          1)單行文本的居中

          主要實(shí)現(xiàn)css代碼:

          水平居中:text-align:center;

          垂直居中:line-height:XXpx; /*line-height與元素的height的值一致*/

          我們先來看這樣一個例子,加入我們這里有一個div,寬度和高度為300px,背景顏色為黑色,然后在div中有一行簡短文字,我們只需要使用line-height:200px;就可以實(shí)現(xiàn)文字的居中效果,具體的代碼如下所示:

          由上圖可以看出我們實(shí)現(xiàn)了單行文字的垂直居中效果,但是很多時(shí)候我們的文字并不知道具體有多少,可能有一行,也可能有很多行,那么遇到多行文字的這種問題我們要如何處理呢。

          2)多行文本的垂直居中

          對于多行文本的垂直居中我們有很多種實(shí)現(xiàn)方式,我們這里逐個的來看一下;

          1、使用display:table來實(shí)現(xiàn)

          主要實(shí)現(xiàn)代碼:

          display: table使塊狀元素成為一個塊級表格;

          display: table-cell;子元素設(shè)置成表格單元格;

          vertical-align: middle;使表格內(nèi)容居中顯示,即可實(shí)現(xiàn)垂直居中的效果;

          具體的html與css的代碼就如下所示:

          2、使用absolute與transform配合實(shí)現(xiàn)

          主要實(shí)現(xiàn)代碼:

          position:absolute; 首先給文本絕對定位;

          left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%,再用transform向左(上)平移它自己寬度(高度)的50%,也就達(dá)到居中效果了。

          具體的html與css的代碼就如下所示:

          3、使用flex實(shí)現(xiàn)

          主要實(shí)現(xiàn)代碼:

          display: flex;設(shè)置 display 屬性的值為 flex 將其定義為彈性容器

          align-items: center;定義項(xiàng)目在交叉軸(縱軸)上如何對齊,垂直對齊居中

          justify-content: center; 定義了項(xiàng)目在主軸上的對齊方式,水平對齊居中

          具體的html與css的代碼就如下所示:

          好了,本篇文章就給大家說到這里,大家自己動手寫一下看能不能寫出一樣的頁面效果出來,也可以找一些類似的頁面自己練習(xí)一下,有需要源碼的可以直接私信【網(wǎng)站源碼】即可。

          每日金句:了解別人心里想什么,你才能得到自己想要的。喜歡我的文章的小伙伴記得關(guān)注一下哦,每天將為你更新最新知識。

          position屬性實(shí)現(xiàn)絕對定位

          <html>
          <head>
          <title>position屬性</title>
          <style type="text/css">
          <!--
          body{
              margin:10px;
              font-family:Arial;
              font-size:13px;
          }
          #father{
              background-color:#a0c8ff;
              border:1px dashed #000000;
              width:100%;
              height:100%;
          }
          #block{
              background-color:#fff0ac;
              border:1px dashed #000000;
              padding:10px;
              position:absolute; /* absolute絕對定位 */
              left:20px; /* 塊的左邊框離頁面左邊界20px */
              top:40px; /* 塊的上邊框離頁面上邊界40px */
          }
          -->
          </style>
          </head>
          <body>
          <div id="father">
          <div id="block">absolute</div>
          </div>
          </body>
          </html>

          以上的代碼我們可以看出父塊#father沒有設(shè)置position屬性,而子塊#block采用的是絕對定位,經(jīng)過測試發(fā)現(xiàn)子塊#block參照瀏覽窗口左上角

          為原點(diǎn),子塊左邊框相對頁面<body>左邊的距離為20px,子塊的上邊框相對頁面<body>上面的距離為40px

          為父塊這是position屬性

          #father{
              background-color:#a0c8ff;
              border:1px dashed #000000;
              position:relative;
              width:100%;
              height:100%;
          }

          我們發(fā)現(xiàn)子塊的參照物為父塊的#father,距左側(cè)20px,距上端40px

          注意top、right、bottom、left這4個CSS屬性,它們都是配合position屬性使用的,表示的是塊的各個邊界離頁面邊框(position設(shè)置為absolute時(shí))

          或者原來的位置(position設(shè)置為relative)的距離。只有當(dāng)position屬性設(shè)置為absolute或者relative時(shí)才能生效;

          用position屬性實(shí)現(xiàn)相對定位

          <html>
          <head>
          <title>position屬性</title>
          <style type="text/css">
          <!--
          body{
              margin:10px;
              font-family:Arial;
              font-size:13px;
          }
          #father{
              background-color:#a0c8ff;
              border:1px dashed #000000;
              width:100%; height:100%;
              padding:5px;
          }
          #block1{
              background-color:#fff0ac;
              border:1px dashed #000000;
              padding:10px;
              position:relative; /* relative相對定位 */
              left:15px; /* 子塊的左邊框距離它原來的位置15px */
              top:10%;
          }
          -->
          </style>
          </head>
          <body>
          <div id="father">
          <div id="block1">relative</div>
          </div>
          </body>
          </html>

          我們可以看到字塊的左邊框相對于其父塊的左邊框(它原來所在的位置)距離為15px,上邊框也是一樣的道理,為10%;

          理解"它原來的位置":子塊和父塊原先的位置的是一致的(因?yàn)楦笁K包含字塊,視覺上看是幾乎重疊的)

          此時(shí)子塊的寬度依然是未移動前的寬度,撐滿未移動前父塊的內(nèi)容。只是由于向右移動了,因此右邊框超出了父塊。

          如果希望子塊的寬度僅僅為其內(nèi)容加上自己的padding值,可以將它的float屬性設(shè)置為left,或者指定其寬度width;

          案例: 文本在圖片上顯示

          SS 是前端里面的基礎(chǔ)之一,也是非常重要的一部分,它往往決定了你所做出來的網(wǎng)頁頁面是否美觀。在設(shè)計(jì)網(wǎng)頁頁面的過程中,總會有將元素或者文字進(jìn)行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。


          一、使用 margin:auto

          當(dāng)元素有給定的高度以及寬度的時(shí)候,使用 margin: auto; 元素僅會水平居中,并不會進(jìn)行垂直居中。此時(shí)就需要設(shè)置元素的 position 為 absolute,父級元素的 position 為 relative,同時(shí)元素的上下左右都需要設(shè)置為 0。

          HTML 代碼

          <div class="box">
            <div class="center1"></div>
          </div>

          CSS 代碼

          .box{
            width: 200px;
            height: 200px;
            background-color: #eee;
            position: relative;
            margin-top: 20px;
          }
          .center1{
            width: 50px;
            height: 50px;
            background-color: #00ACED;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }

          效果展示:



          二、使用 position:absolute

          當(dāng)已經(jīng)知道了要進(jìn)行水平垂直居中的元素的寬高時(shí),就可以通過設(shè)置 position: absolute 來實(shí)現(xiàn)。但是,使用的同時(shí)還需要結(jié)合其他屬性才完整實(shí)現(xiàn)。因?yàn)椋瑔问窃O(shè)置 absolute,上左距離均為一半,就會出現(xiàn)下面這種情況。很顯然可以看到,元素并不是完全居中,僅只有左上角的位置在中心點(diǎn)

          概念圖:

          因此想要實(shí)現(xiàn)元素完全水平垂直居中,在設(shè)置了 absolute 定位后,可以設(shè)置 margin 值為負(fù),或者使用 calc 來計(jì)算,上左距離在 50% 的基礎(chǔ)上還要減去元素本身一半的寬高。

          margin 值為負(fù)或者 calc 計(jì)算均是在已知元素寬高的情況下,假設(shè)不知道元素的寬高,那么怎么實(shí)現(xiàn)水平垂直居中呢?這里就可以使用 transform 屬性,通過坐標(biāo)位移來實(shí)現(xiàn)居中。

          CSS 代碼

          /* 結(jié)合 margin */
          .center2{
            width: 50px;
            height: 50px;
            background-color: #7FFFD4;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -25px;
          }
          /* 結(jié)合 calc 計(jì)算*/
          .center2{
            width: 50px;
            height: 50px;
            background-color: #7FFFD4;
            position: absolute;
            left: calc(50% - 25px)
            top: calc(50% - 25px);
          }
          /* 結(jié)合 transform */
          .center2{
          width: 50px;
          height: 50px;
          background-color: #7FFFD4;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          }

          效果展示



          03

          PART

          三、使用彈性布局

          可以通過彈性布局來設(shè)置水平垂直居中,這里需要設(shè)置父級元素 display:flex; 還需要設(shè)置兩個屬性,水平布局 justify-content 以及垂直布局 align-items。

          HTML代碼

          <div class="box2">
            <div class="center4"></div>
          </div>

          CSS代碼:

          .box2{
            background-color: #eee;
            width: 200px;
            height: 200px;
            position: relative;
            margin-top: 20px ;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .center4{
            width: 50px;
            height: 50px;
            background-color: #B39873;
          }

          效果展示:


          四、文本水平對齊和行高

          前面介紹的是元素如何實(shí)現(xiàn)水平垂直居中,下面介紹的是如何將文字進(jìn)行水平垂直居中。這第一個方法也是最經(jīng)常用的,使用文本水平對齊 text-align 和行高 line-height 來實(shí)現(xiàn)的。

          HTML 代碼

          <div class="box3">
            <div class="center5">文字居中</div>
          </div>

          CSS 代碼

          .box3{
            background-color: #eee;
            width: 200px;
            height: 200px;
            margin-top: 20px;
          }
          .center5{
            text-align: center;
            line-height: 200px;
          }

          效果展示


          05

          PART

          五、使用網(wǎng)格布局

          第二個方法可以通過網(wǎng)格布局 grid 來實(shí)現(xiàn)。而這里通過 grid 有兩種方式實(shí)現(xiàn),一種對元素本身屬性進(jìn)行設(shè)置,另一種在元素的父級元素中設(shè)置。兩者看上去內(nèi)容似乎差不多,不同的是在元素中設(shè)置的是 align-self 還要多了一個 margin,父級元素中是 align-items。

          相關(guān)代碼:

          /* grid 元素中設(shè)置 */
          .box4{
            background-color: #eee;
            width: 200px;
            height: 200px;
            margin-top: 20px;
            display: grid;
          }
          .center6{
            align-self: center;
            justify-content: center;
            margin: auto;
          }
          /* grid 父級元素中設(shè)置 */
          .box5{
            background-color: #eee;
            width: 200px;
            height: 200px;
            margin-top: 20px;
            display: grid;
            align-items: center;
            justify-content: center;
          }
          
          

          效果展示:


          六、總結(jié)

          以上就是關(guān)于 CSS 如何將元素或者文字進(jìn)行水平垂直居中的幾種常用方法,大家還其他關(guān)于 CSS 實(shí)現(xiàn)水平垂直居中的方法嗎?請?jiān)谠u論區(qū)留下你的想法。

          關(guān)注w3cschool編程獅訂閱更多IT資訊、技術(shù)干貨~


          主站蜘蛛池模板: 亚洲午夜在线一区| 免费人妻精品一区二区三区| 人妻无码一区二区三区四区| 无码人妻av一区二区三区蜜臀| 色妞色视频一区二区三区四区| 蜜桃传媒一区二区亚洲AV| 一区二区精品在线| 果冻传媒董小宛一区二区| 精品亚洲av无码一区二区柚蜜| 精品爆乳一区二区三区无码av| 一区二区三区精密机械| 中文国产成人精品久久一区| 春暖花开亚洲性无区一区二区| 国产精品无码一区二区三级| 精品无码成人片一区二区98| 国产波霸爆乳一区二区| 一区二区精品视频| 无码中文字幕人妻在线一区二区三区| 日韩一区精品视频一区二区 | 国产精品亚洲一区二区三区久久 | 亚洲国产精品无码第一区二区三区 | 久久久精品一区二区三区| 国产成人无码精品一区不卡| 亚洲一区二区三区无码国产| 乱色精品无码一区二区国产盗| 国产在线无码视频一区| 午夜AV内射一区二区三区红桃视| 亚洲天堂一区二区| 国产精品自拍一区| 亚洲乱码一区二区三区在线观看 | 国产精品久久久久一区二区| 精品亚洲福利一区二区| 精品3d动漫视频一区在线观看| 久久精品一区二区三区资源网| 精品人妻无码一区二区色欲产成人| 精品少妇一区二区三区在线| 濑亚美莉在线视频一区| 日本道免费精品一区二区| 怡红院美国分院一区二区| 国产成人片视频一区二区| 丰满爆乳无码一区二区三区|