SS 是前端里面的基礎之一,也是非常重要的一部分,它往往決定了你所做出來的網頁頁面是否美觀。在設計網頁頁面的過程中,總會有將元素或者文字進行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。
當元素有給定的高度以及寬度的時候,使用 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 來實現。但是,使用的同時還需要結合其他屬性才完整實現。因為,單是設置 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定位相關的屬性,定位可以分為三類:
我們可以通過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>
從上面代碼的效果中,我們可以了解以下幾點:
將一個元素設置下面的屬性:
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>
從上面代碼的效果中,我們可以了解以下幾點:
將一個元素設置下面的屬性:
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>
從上面代碼的效果中,我們可以了解以下幾點:
理解了上面三種定位方法,我們再來考慮開始提到的那個問題,如果我們希望將一個數字列表壓在一張圖片之上。居中顯示在網頁之上,我們將數字列表設置定位之后,坐標應該設置成多少呢?因為居中的圖片與瀏覽器窗口的左邊距是不固定的,所以沒有辦法設置成一個固定值,這個時候,我們就需要給定位元素設置參照物。
將父級元素設置定位元素,那么子級元素定位的坐標原點會設置為父級元素左上角的位置。代碼如下所示。
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 }
父級容器不管是絕對定位,相對定位還是固定定位,都可以實現作為參照物的效果,在實際項目開發中,常用方法如下所示:
一般父級容器不設置絕對定位。
大家掌握了定位之后會發現一個問題,那就是只要我么使用定位,就可以實現所有的網頁效果,再也不需要浮動布局,也不用管網頁的樹狀結構了。
這樣做其實是不可以的,在制作網頁的過程中,我們不僅要將元素放在指定的位置,還要考慮網頁的后續可維護性,已經針對不同屏幕尺寸的適應能力。因此,定位是我們實現網頁布局的最后手段。多于一個新手來說,能不用定位來實現的布局,都不要用定位來實現。
【融職教育】在工作中學習,在學習中工作
聯網前端技術中最基礎的事情就是做頁面。
做頁面最基礎的事情就是做版塊的布局。
做布局最基礎的事情就是元素的定位。
而定位竟又分出了5種類型:
說到定位,確實是個實踐性很強的技術,光看文檔和范例未必能準確理解掌握,一旦實際應用,如果沒有章法,各種定位方式混在一起,相互作用,相互干擾,排版就變成了尷尬的算術題,往往越寫越亂,經常會產生莫名其妙的排版結果,弄的很頭大,即使最終做出了需要的頁面效果,往往也是連蒙帶猜,反復調試修改,花費大量時間不說,代碼質量一定也很差。
所以無論初學者還是有一定經驗的,無論是手寫布局,還是使用各種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的樣式是做為容器用的,我們統一設置為:
.demo的樣式是為測試定位用的:
其中前2個設置是固定的,我們在后續幾個定位模式中會重復地使用這部分css代碼。至此,我們設置好了“2個紅色塊,一個在容器外,一個在容器內”。在容器外的紅色塊,其實就是以瀏覽器窗口為容器了。
現在只需通過修改position的不同類型,查看2個紅色塊兒和綠色容器的位置關系,就可以了解各種定位究竟是怎么回事了。
先看看正常定位時的效果:
這就是正常的文檔流,2個紅色塊只有margin起作用,左邊和上邊各自距離上級容器10和20像素,而綠色容器的左邊以窗口為基準,上邊以上一個紅色塊底部為基準來定位50像素
二、相對定位 relative
.demo改一行css
position: relative;
看看效果
注意幾個變化:
三、絕對定位 absolute
.demo改一行css
position: absolute;
看看效果
我們看到了明顯的變化:
接下來,如果我們把綠色容器的定位屬性改一下會如何?
position: relative;
看看效果
效果跟剛才不一樣了,區別在哪里呢?區別就是:
四、固定定位 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(默認)
相對定位 relative
絕對定位 absolute
脫離正常文檔流,相對于瀏覽器的大窗口進行偏移,原來的margin也一起疊加,
脫離同級文檔流,相對于上級容器的位置進行偏移,原來的margin也一起疊加。
固定定位 fixed
粘性定位 sticky
像上面這樣一一羅列下來,仍然是很羅嗦的不是嗎?其實這就是一個通過做實驗,歸納總結,走腦子的過程,在沒有實踐經歷的時候,這些實驗性的代碼,把空洞的理論呈現了出來,而如何在實踐中用上這些定位的知識才是我們的最終目標。
定位3大原則:
從實戰的角度我把定位大致簡化為3個原則,既然是簡化的,因此就不太嚴謹,忽略了一些細節,也不是唯一最優方案,但多數情況下還是適用的,而且此簡化方案大大降低了使用的復雜性。
1、弄清一個塊兒在文檔流中是否占據位置空間?
2、弄清如何設定一個塊兒的位置,其坐標是以誰為基準?
3、上述5種定位方式在實踐中如何選用?
至此,position定位的知識總結完了,排版布局終于有簡單的章法可依了,是不是很容易看懂呢?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。