整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS 中幾種最常用的水平垂直居中的方法

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


          一、使用 margin:auto

          當元素有給定的高度以及寬度的時候,使用 margin: auto; 元素僅會水平居中,并不會進行垂直居中。此時就需要設置元素的 position 為 absolute,父級元素的 position 為 relative,同時元素的上下左右都需要設置為 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

          當已經知道了要進行水平垂直居中的元素的寬高時,就可以通過設置 position: absolute 來實現。但是,使用的同時還需要結合其他屬性才完整實現。因為,單是設置 absolute,上左距離均為一半,就會出現下面這種情況。很顯然可以看到,元素并不是完全居中,僅只有左上角的位置在中心點

          概念圖:

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

          margin 值為負或者 calc 計算均是在已知元素寬高的情況下,假設不知道元素的寬高,那么怎么實現水平垂直居中呢?這里就可以使用 transform 屬性,通過坐標位移來實現居中。

          CSS 代碼

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

          效果展示



          03

          PART

          三、使用彈性布局

          可以通過彈性布局來設置水平垂直居中,這里需要設置父級元素 display:flex; 還需要設置兩個屬性,水平布局 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;
          }

          效果展示:


          四、文本水平對齊和行高

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

          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

          五、使用網格布局

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

          相關代碼:

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

          效果展示:


          六、總結

          以上就是關于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法,大家還其他關于 CSS 實現水平垂直居中的方法嗎?請在評論區留下你的想法。

          關注w3cschool編程獅訂閱更多IT資訊、技術干貨~

          、定位的基本概念

          在我們瀏覽網頁的過程中,經常會發現網頁中的元素重疊展示,例如一個列表壓在了一張圖片之上,或者瀏覽器右下角突然彈出的廣告壓到了其他元素之上,這些都需要使用css的定位才能實現,本節我們就講解css定位相關的屬性,定位可以分為三類:

          • 絕對定位
          • 相對定位
          • 固定定位

          二、css定位詳解

          我們可以通過position屬性,將一個元素設置成定位元素,之后就可以通過top、left、bottom、right屬性來設置元素的坐標。

          絕對定位

          將一個元素設置下面的屬性:

          1 element{
          2     position:absolute;
          3 }


          元素就變成了一個絕對定位元素,實例代碼如下所示。

           1 <!DOCTYPE html>
           2 <html lang="en">
           3 <head>
           4     <meta charset="UTF-8">
           5     <title>Document</title>
           6     <style>
           7         .box{
           8             width:100px;
           9             height:100px;
          10             background-color: #f00;
          11             border:1px solid #0f0;
          12         }
          13         .pos{
          14             position: absolute; /*設置絕對定位元素*/
          15             top:50px;           
          16             left:50px;
          17         }
          18     </style>
          19 </head>
          20 <body>
          21     <!-- 一個元素可以設置多個class屬性,用空格區分開 -->
          22     <div class="box">1</div>
          23     <div class="box pos">2</div>
          24     <div class="box">3</div>
          25 </body>
          26 </html>

          從上面代碼的效果中,我們可以了解以下幾點:

          • 絕對定位元素脫離文檔流,并不占位,第一個div和第三個div相鄰。
          • 原點在整個網頁左上角的位置。
          • 定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。

          相對定位

          將一個元素設置下面的屬性:

          1 element{
          2     position:relative;
          3 }

          元素就變成了一個相對定位元素,實例代碼如下所示。

           1 <!DOCTYPE html>
           2 <html lang="en">
           3 <head>
           4     <meta charset="UTF-8">
           5     <title>Document</title>
           6     <style>
           7         .box{
           8             width:100px;
           9             height:100px;
          10             background-color: #f00;
          11             border:1px solid #0f0;
          12         }
          13         .pos{
          14             position: relative; /*設置相對定位元素*/
          15             top:50px;
          16             left:50px;
          17         }
          18     </style>
          19 </head>
          20 <body>
          21     <div class="box">1</div>
          22     <div class="box pos">2</div>
          23     <div class="box">3</div>
          24 </body>
          25 </html>

          從上面代碼的效果中,我們可以了解以下幾點:

          • 相對定位元素不脫離文檔流,元素占位,第一個div和第三個div不相鄰,中間的間距就是相對定位元素的位置。
          • 原點在其占位位置的左上角。
          • 定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。

          固定定位

          將一個元素設置下面的屬性:

          1 element{
          2     position:fixed;
          3 }

          元素就變成了一個固定定位元素,實例代碼如下所示。

           1 <!DOCTYPE html>
           2 <html lang="en">
           3 <head>
           4     <meta charset="UTF-8">
           5     <title>Document</title>
           6     <style>
           7         body{
           8             height:1000px;
           9         }
          10         .box{
          11             width:100px;
          12             height:100px;
          13             background-color: #f00;
          14             border:1px solid #0f0;
          15         }
          16         .box2{
          17             position: fixed; /*設置固定定位元素*/
          18             top:50px;
          19             left:50px;
          20         }
          21     </style>
          22 </head>
          23 <body>
          24     <div class="box box1">1</div>
          25     <div class="box box2">2</div>
          26     <div class="box box3">3</div>
          27 </body>
          28 </html>

          從上面代碼的效果中,我們可以了解以下幾點:

          • 固定定位元素脫離文檔流,并不占位,第一個div和第三個div相鄰。
          • 我們將body元素的高度設置成1000px,這樣我們就可以通過滾輪控制網頁顯示的位置。
          • 原點在瀏覽器當前窗口的左上角。
          • 定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。
          • 當混輪滾動的時候,固定定位元素永遠相對于窗戶的位置定位。

          設置參照物

          理解了上面三種定位方法,我們再來考慮開始提到的那個問題,如果我們希望將一個數字列表壓在一張圖片之上。居中顯示在網頁之上,我們將數字列表設置定位之后,坐標應該設置成多少呢?因為居中的圖片與瀏覽器窗口的左邊距是不固定的,所以沒有辦法設置成一個固定值,這個時候,我們就需要給定位元素設置參照物。

          將父級元素設置定位元素,那么子級元素定位的坐標原點會設置為父級元素左上角的位置。代碼如下所示。

          1 <div class="container">
          2     <div class="box"></div>
          3 </div>
           1  .container{
           2     width:300px;
           3     height:300px;
           4     border:1px solid blue;
           5     position: relative;;
           6     top:100px;
           7     left:100px;
           8 }
           9 .box{
          10     border:blue 4px solid;
          11     width:100px;
          12     height:100px;
          13     position:absolute;
          14     top:10px;
          15     left:20px;
          16 }

          父級容器不管是絕對定位,相對定位還是固定定位,都可以實現作為參照物的效果,在實際項目開發中,常用方法如下所示:

          1. 如果父級元素不脫離文檔流,參與正常排版,那么父級設置相對定位。
          2. 如果父級需要根據視窗的顯示位置而變化位置,可以設置固定定位。

          一般父級容器不設置絕對定位。

          注意事項

          大家掌握了定位之后會發現一個問題,那就是只要我么使用定位,就可以實現所有的網頁效果,再也不需要浮動布局,也不用管網頁的樹狀結構了。

          這樣做其實是不可以的,在制作網頁的過程中,我們不僅要將元素放在指定的位置,還要考慮網頁的后續可維護性,已經針對不同屏幕尺寸的適應能力。因此,定位是我們實現網頁布局的最后手段。多于一個新手來說,能不用定位來實現的布局,都不要用定位來實現。

          三、課后練習

          1. 完成融職教育右側返回頂部的懸浮效果。
          2. 制作一個在圖片上顯示圖標描述文字的效果,并且圖片再網頁右下角顯示。
          3. 制作一個標題效果,讓標題左右兩邊各帶一個橫線(使用偽元素和定位來實現)。

          【融職教育】在工作中學習,在學習中工作

          聯網前端技術中最基礎的事情就是做頁面。

          做頁面最基礎的事情就是做版塊的布局。

          做布局最基礎的事情就是元素的定位。

          而定位竟又分出了5種類型:

          1. 正常定位 static
          2. 相對定位 relative
          3. 絕對定位 absolute
          4. 固定定位 fixed
          5. 粘性定位 sticky

          說到定位,確實是個實踐性很強的技術,光看文檔和范例未必能準確理解掌握,一旦實際應用,如果沒有章法,各種定位方式混在一起,相互作用,相互干擾,排版就變成了尷尬的算術題,往往越寫越亂,經常會產生莫名其妙的排版結果,弄的很頭大,即使最終做出了需要的頁面效果,往往也是連蒙帶猜,反復調試修改,花費大量時間不說,代碼質量一定也很差。

          所以無論初學者還是有一定經驗的,無論是手寫布局,還是使用各種UI框架做頁面,都應該對這幾種定位方式弄清楚細節,后續工作中才會更加順利,事半功倍。

          為此筆者精心制作了幾張圖解,配以對應的示范代碼,并從實踐的角度簡化了定位的原則,旨在以一種更易于理解、更貼近實戰的方式,讓你看明白、搞清楚。

          正常文檔流

          頁面是如何建立起來的呢?是通過html和css代碼形成頁面結構,把各個元素塊兒,像寫word文檔那樣,讓圖片文字一個接一個地排列組合而成。正常的文檔流,默認情況下,每個元素都會占用一定的空間,它們從左到右,從上到下依次排列,相互不會覆蓋。

          定位

          所謂定位,就是人為的設定每個元素塊上下左右的位置。之所以要定位,就是為了改變文檔流中緊挨著的元素位置,實現我們所需要的排版意圖。設定位置主要有2個途徑:

          1、在正常的文檔流中:所有元素都可以通過 margin 控制它同外圍4周元素的距離

          2、有浮起特性的元素:通過 top,left,right,bottom 指定浮起后額外的位置偏移

          所謂浮起,是指元素離開文檔流,本身不再占據空間,好像飄浮在上面

          定位就是設置 position 屬性,它可以有5個類型,下面分別說明:

          一、正常定位 static

          position為空,則默認就是static,正常定位就是正常的文檔流,所有元素都可以通過 margin 控制它同外圍4周元素的距離,在寫法上通常可以這樣寫

          margin:1px 2px 3px 4px;

          4個數值分別代表:矩形元素的4條邊同上、右、下、左(就是順時針走一圈)周圍元素的距離。也可以分開寫成 margin-top、margin-right、margin-bottom、margin-left

          先簡要介紹下實驗用的代碼:

          實驗代碼的html部分如下

          <div class="demo">static定位</div>
          <div class="box">
          	<div class="demo">(容器內)static定位</div>
          	<div>(容器內)后面的文檔流</div>
          </div>
          

          這個文檔流是這樣構成的:

          首先一個div用static定位,下面跟一個容器div,容器中又有一個div也是static定位,后面跟一段文字塊。

          在后續幾個定位模式中我們重復地使用這個html代碼,僅僅修改其引用的css中的position屬性,來觀察變化。

          實驗代碼的css部分如下

          <style>
          body{font-family:"Microsoft YaHei";margin:0;}
          .box{
          	width:400px;height: 200px;
          	border: 1px solid green;background-color: #cfc;opacity:0.7;
          	margin: 50px 0 0 50px;
          }
          .demo{
          	position: static;
          	width: 100px; height: 40px;
          	border: 1px solid red;background-color: #fcc;opacity:0.8;color:red;
          	top:50px;left:100px;
          	margin:20px 0 0 10px;
          }
          </style>
          

          body的樣式定義了字體,設置頁面邊距為0,這個僅僅是做個基礎效果,跟本次主題無關。

          .box的樣式是做為容器用的,我們統一設置為:

          • 容器款400高200,左邊距50上邊距50,邊框綠色,背景淺綠半透明。后面我們簡稱其為“綠色容器塊

          .demo的樣式是為測試定位用的:

          1. 設置基礎樣式寬100高40,邊框紅色,背景淡紅半透明,字體紅色
          2. 設置margin為左邊距10,上邊距20,設置浮動為top上邊距50,left左邊距100
          3. 設置position: static;

          其中前2個設置是固定的,我們在后續幾個定位模式中會重復地使用這部分css代碼。至此,我們設置好了“2個紅色塊,一個在容器外,一個在容器內”。在容器外的紅色塊,其實就是以瀏覽器窗口為容器了。

          現在只需通過修改position的不同類型,查看2個紅色塊兒和綠色容器的位置關系,就可以了解各種定位究竟是怎么回事了。

          先看看正常定位時的效果:

          這就是正常的文檔流,2個紅色塊只有margin起作用,左邊和上邊各自距離上級容器10和20像素,而綠色容器的左邊以窗口為基準,上邊以上一個紅色塊底部為基準來定位50像素

          二、相對定位 relative

          .demo改一行css

          position: relative;

          看看效果

          注意幾個變化:

          • 紅色塊相對原來的位置移動了left和top的距離,其基準是各自所在的容器。
          • 綠色容器的位置沒有變,仿佛仍然緊跟原來位置的紅色塊(仍占位)
          • 綠色容器里面的文字塊位置沒變,仿佛仍然緊跟容器內紅色塊原來的位置(仍占位)

          三、絕對定位 absolute

          .demo改一行css

          position: absolute;

          看看效果

          我們看到了明顯的變化:

          • 綠色的容器位置變了,其頂部的位置基準變成瀏覽器窗口的頂部,而不是跟著原來的紅色塊了。
          • 兩個紅色塊也重疊到一起了,因為容器內部的紅色塊的位置基準也變成了瀏覽器窗口,
          • 綠色容器里面的文字塊位置變了,容器內紅色塊原來的位置不再占用,所以文字提前了

          接下來,如果我們把綠色容器的定位屬性改一下會如何?

          position: relative;

          看看效果

          效果跟剛才不一樣了,區別在哪里呢?區別就是:

          • 2個紅色塊的位置基準,分別是各自原來的容器,即容器外的相對于瀏覽器窗口,容器內的相對于容器

          四、固定定位 fixed

          .demo改一行css

          position: fixed;

          仔細看我們發現跟前面position: absolute;時的第一種情況一樣,沒錯,確實一樣,但是有一個區別,就是當我們滾動屏幕的時候,所有元素都在滾動,只有那2個紅色塊是固定不會動的!而前面absolute狀態時,2個紅色塊是跟著滾動的

          五、粘性定位 sticky

          .demo改一行css

          position: sticky;

          從外觀上看跟static是一樣的,不過sticky有個神奇的地方在于其“粘性”,我們重新寫一段代碼來演示它:

          <style>
          	body{background-color: #333;color:#eee;font-size:24px;margin:0;}
          	.demo{
          		width: 100%;height: 40px;
          		background-color: #e00;
          		position: sticky; top:10px;
          	}
          </style>
          <!-- 頂部內容 -->
          <div style="height:100px;">
          	頂部菜單若干1<br>
          	頂部菜單若干2<br>
          	頂部菜單若干3<br>
          </div>
          <!-- 第1屏內容 -->
          <div>
          	<div class="demo">sticky定位,先走再停,第一屏走完我才走</div>
          	正文第1屏1<br>
          	正文第1屏2<br>
          	正文第1屏3<br>
          	正文第1屏4<br>
          	正文第1屏5<br>
          	正文第1屏6<br>
          	正文第1屏7<br>
          	正文第1屏8<br>
          	正文第1屏9<br>
          </div>
          <!-- 第2屏內容 -->
          <div style="height:10000px;color:#0e0;">
          	正文第2屏1<br>
          	正文第2屏2<br>
          	正文第2屏3<br>
          	正文第2屏4<br>
          	正文第2屏5<br>
          	正文第2屏6<br>
          	正文第2屏7<br>
          	正文第2屏8<br>
          	正文第2屏9<br>
          </div>
          

          效果是這樣:

          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          總結一下:

          正常定位 static(默認)

          • 平時是正常文檔流、占據空間,用top,left指定位置是無效的
          • 用途:大部分時候默認都用這個,是整個頁面的主文檔流

          相對定位 relative

          • 平時是正常文檔流、占據空間
          • 指定位置top,left等后,相對于文檔流進行偏移、并浮起,但不釋放、也不改變原來占據的位置。
          • 用途:通常用于做容器,以此容器為基準,里面再放置其它元素,這些元素相對于本容器進行絕對定位,以便將位置整體固定下來。

          絕對定位 absolute

          • 平時是正常文檔流,但是浮起的,不占據空間
          • 指定位置top,left等后,分兩種情況:
          • 1)如果其上級的position是空或者static

          脫離正常文檔流,相對于瀏覽器的大窗口進行偏移,原來的margin也一起疊加,

          • 2)如果其上級的position是relative或者其它定位

          脫離同級文檔流,相對于上級容器的位置進行偏移,原來的margin也一起疊加。

          • 滾動:有效。
          • 用途:通常用于與上級relative容器搭配,做容器的子元素,這些元素相對于本容器進行絕對定位,以便將位置整體固定下來。

          固定定位 fixed

          • 平時是正常文檔流,但是浮起的,不占據空間
          • 指定位置top,left等后,脫離正常文檔流,相對于瀏覽器的大窗口進行偏移,原來的margin也一起疊加。
          • 滾動:無效。
          • 用途:通常用于做頭部,尾部的導航、漂浮的菜單、廣告、客服入口提示等

          粘性定位 sticky

          • 平時是正常文檔流,占據正常空間。指定位置top,left等是無效的。
          • 當拉動滾動條后,元素一開始在頁面滾動時也如同在正常流中,
          • 但頁面向上滾動到top位置時就會固定在屏幕上,浮起不動,如同fixed一般。
          • 當頁面繼續向上滾動,直到到它的上級容器的底部跟它的底部接觸后,就一起向上滾動,直到滾出屏幕。
          • 這個屬性值在瀏覽器兼容性上比較差,低版本不支持。
          • 用途:通常用于做頭部的關鍵導航區

          像上面這樣一一羅列下來,仍然是很羅嗦的不是嗎?其實這就是一個通過做實驗,歸納總結,走腦子的過程,在沒有實踐經歷的時候,這些實驗性的代碼,把空洞的理論呈現了出來,而如何在實踐中用上這些定位的知識才是我們的最終目標。

          定位3大原則:

          從實戰的角度我把定位大致簡化為3個原則,既然是簡化的,因此就不太嚴謹,忽略了一些細節,也不是唯一最優方案,但多數情況下還是適用的,而且此簡化方案大大降低了使用的復雜性。

          1、弄清一個塊兒在文檔流中是否占據位置空間?

          • 正常定位、相對定位relative,都是正常擺放的塊兒,要占空間;
          • 絕對定位absolute、固定定位fixed,都是浮起的塊兒,不占位置。

          2、弄清如何設定一個塊兒的位置,其坐標是以誰為基準?

          • 凡是要占空間的塊兒,用margin等確定位置,它是以4周相鄰元素為基準;
          • 凡是不占位置的塊兒,盡量用top,left 等確定位置,它是以瀏覽器窗口(父容器為static或空時)或父容器為基準的。

          3、上述5種定位方式在實踐中如何選用?

          • 一般情況,只要是可以簡單依次排列的,就用默認的正常定位順次擺放元素即可;
          • 局部的復雜精確排版,比如頁面中部的標題圖片列表,使用relative定位的塊兒做容器,內部元素相對于此容器做absolute絕對定位完成布局;
          • 局部需要固定位置,不隨滾動條滾動的,比如頁面頭部尾部,使用fixed固定定位或sticky粘性定位。

          至此,position定位的知識總結完了,排版布局終于有簡單的章法可依了,是不是很容易看懂呢?


          主站蜘蛛池模板: 精品无码综合一区| 亚洲AV福利天堂一区二区三 | 久久er99热精品一区二区| 无码人妻一区二区三区免费| 日韩人妻无码一区二区三区综合部 | 中文字幕在线播放一区| 国产91久久精品一区二区| 国产高清视频一区三区| 色一情一乱一伦一区二区三区日本| 无码少妇丰满熟妇一区二区| 中文字幕日韩一区二区三区不卡| 国产一区三区三区| 国产成人一区在线不卡| 国产美女视频一区| 中文字幕在线观看一区 | 亚洲蜜芽在线精品一区| 高清一区二区三区日本久| 99精品国产高清一区二区三区| 人妻无码一区二区三区四区| 日韩动漫av在线播放一区| 精品视频一区二区| 一区二区三区波多野结衣 | 日韩高清国产一区在线| 无码一区二区三区在线观看| 亚洲图片一区二区| 美女毛片一区二区三区四区| 精品黑人一区二区三区| 无码一区二区波多野结衣播放搜索 | 深夜福利一区二区| 精品国产亚洲一区二区在线观看| 精品视频一区二区三区四区五区 | 亚洲日本久久一区二区va| 无码人妻一区二区三区免费手机| 中文字幕一区二区三区人妻少妇| 国产精品视频一区二区三区经| 亚洲av无一区二区三区| 国产精品一区二区无线| 国产一区二区视频在线观看| 性无码一区二区三区在线观看| 亚洲日本久久一区二区va| 国产一国产一区秋霞在线观看|