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資訊、技術干貨~
篇文章主要給大家介紹一下如何使用html+css實現元素的水平與垂直居中效果,這也是我們網頁在編碼制作中會經常用到的問題。
主要實現css代碼:
水平居中:text-align:center;
垂直居中:line-height:XXpx; /*line-height與元素的height的值一致*/
我們先來看這樣一個例子,加入我們這里有一個div,寬度和高度為300px,背景顏色為黑色,然后在div中有一行簡短文字,我們只需要使用line-height:200px;就可以實現文字的居中效果,具體的代碼如下所示:
由上圖可以看出我們實現了單行文字的垂直居中效果,但是很多時候我們的文字并不知道具體有多少,可能有一行,也可能有很多行,那么遇到多行文字的這種問題我們要如何處理呢。
對于多行文本的垂直居中我們有很多種實現方式,我們這里逐個的來看一下;
1、使用display:table來實現
主要實現代碼:
display: table使塊狀元素成為一個塊級表格;
display: table-cell;子元素設置成表格單元格;
vertical-align: middle;使表格內容居中顯示,即可實現垂直居中的效果;
具體的html與css的代碼就如下所示:
2、使用absolute與transform配合實現
主要實現代碼:
position:absolute; 首先給文本絕對定位;
left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%,再用transform向左(上)平移它自己寬度(高度)的50%,也就達到居中效果了。
具體的html與css的代碼就如下所示:
3、使用flex實現
主要實現代碼:
display: flex;設置 display 屬性的值為 flex 將其定義為彈性容器
align-items: center;定義項目在交叉軸(縱軸)上如何對齊,垂直對齊居中
justify-content: center; 定義了項目在主軸上的對齊方式,水平對齊居中
具體的html與css的代碼就如下所示:
好了,本篇文章就給大家說到這里,大家自己動手寫一下看能不能寫出一樣的頁面效果出來,也可以找一些類似的頁面自己練習一下,有需要源碼的可以直接私信【網站源碼】即可。
每日金句:了解別人心里想什么,你才能得到自己想要的。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
平居中方案:
水平居中設置
1、行內元素
設置 text-align:center
2、定寬塊狀元素
設置 左右 margin 值為 auto
3、不定寬塊狀元素
a:在元素外加入 table 標簽(完整的,包括 table、tbody、tr、td),該元素寫在 td 內,然后設置 margin 的值為 auto
b:給該元素設置 displa:inine 方法
c:父元素設置 position:relative 和 left:50%,子元素設置 position:relative 和 left:50%
垂直居中設置
1、父元素高度確定的單行文本
設置 height = line-height
2、父元素高度確定的多行文本
a:插入 table (插入方法和水平居中一樣),然后設置 vertical-align:middle
b:先設置 display:table-cell 再設置 vertical-align:middle
在前端面試中,大都會問你div居中的方法:
文筆不好,就隨便寥寥幾句話概括了,希望大家能夠輕拍
不過以后文筆肯定會變得更好一些的。
開始這些東西之前也可以測試一下你對html了解多少,讓我們測試一下吧,小測驗:你對HTML5了解有多少?
今天我們就細數一下幾種方法:
1,使用position:absolute,設置left、top、margin-left、margin-top的屬性
.one{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
這種方法基本瀏覽器都能夠兼容,不足之處就是需要固定寬高。
2,使用position:fixed,同樣設置left、top、margin-left、margin-top的屬性
.two{
position:fixed;
width:180px;
height:180px;
margin-top:-90px;
margin-left:-90px;
background:orange;
}
大家都知道的position:fixed,IE是不支持這個屬性的
3,利用position:fixed屬性,margin:auto這個必須不要忘記了。
.three{
position:fixed;
width:160px;
height:160px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:pink;
}
4,利用position:absolute屬性,設置top/bottom/right/left
.four{
position:absolute;
width:140px;
height:140px;
background:black;
}
5,利用display:table-cell屬性使內容垂直居中
.five{
display:table-cell;
vertical-align:middle;
text-align:center;
width:120px;
height:120px;
background:purple;
}
6,最簡單的一種使行內元素居中的方法,使用line-height屬性
.six{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
這種方法也很實用,比如使文字垂直居中對齊
7,使用css3的display:-webkit-box屬性,再設置-webkit-box-pack:center/-webkit-box-align:center
.seven{
width:90px;
height:90px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
background:yellow;
color:black;
}
8,使用css3的新屬性transform:translate(x,y)屬性
.eight{
position:absolute;
width:80px;
height:80px;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:green;
}
這個方法可以不需要設定固定的寬高,在移動端用的會比較多,在移動端css3兼容的比較好
9、最高大上的一種,使用:before元素
.nine{
position:fixed;
display:block;
background:rgba(0,0,0,.5);
}
.nine:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.nine .content{
width:60px;
height:60px;
line-height:60px;
color:red;
總而言之所有的居中的方法就是你必須要掌握css屬性的這個概念HTML DIV+CSS,你掌握了就可以好好的運用這些居中的東西了
限時!!免費送Dreamweaver、js等前端教程
↓↓↓
*請認真填寫需求信息,我們會在24小時內與您取得聯系。