如何使用html+css實現元素的水平與垂直居中效果，這也是我們網頁在編碼製作中會經常用到的問題。 1）單行文本的居中 主要實現css代碼： 水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height與元素的height的值一致*/ 我們先 ...
如何使用html+css實現元素的水平與垂直居中效果，這也是我們網頁在編碼製作中會經常用到的問題。
1）單行文本的居中
主要實現css代碼：
水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height與元素的height的值一致*/
我們先來看這樣一個例子，加入我們這裡有一個div，寬度和高度為300px，背景顏色為黑色，然後在div中有一行簡短文字，我們只需要使用line-height:200px;就可以實現文字的居中效果，具體的代碼如下所示：
由上圖可以看出我們實現了單行文字的垂直居中效果，但是很多時候我們的文字並不知道具體有多少，可能有一行，也可能有很多行，那麼遇到多行文字的這種問題我們要如何處理呢。
2）多行文本的垂直居中
對於多行文本的垂直居中我們有很多種實現方式，我們這裡逐個的來看一下；
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的代碼就如下所示：
好了，本篇文章就給大家說到這裡，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下。
轉載自：https://baijiahao.baidu.com/s?id=1622460301039180175&wfr=spider&for=pc
