本篇文章主要給大家介紹一下如何使用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的代碼就如下所示：

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

每日金句：了解别人心裡想什麼，你才能得到自己想要的。喜歡我的文章的小夥伴記得關注一下哦，每天将為你更新最新知識。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!