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

1）單行文本的居中

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

水平居中：text-align:center;

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

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

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

2）多行文本的垂直居中

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

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

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

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

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的代碼就如下所示：

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

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