HTML技巧篇：實現元素水平與垂直居中的幾種方式

如何使用html+css實現元素的水平與垂直居中效果，這也是咱們網頁在編碼製做中會常常用到的問題。

1）單行文本的居中

主要實現css代碼：

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

咱們先來看這樣一個例子，加入咱們這裏有一個div，寬度和高度爲300px，背景顏色爲黑色，而後在div中有一行簡短文字，咱們只須要使用line-height:200px;就能夠實現文字的居中效果，具體的代碼以下所示：

由上圖能夠看出咱們實現了單行文字的垂直居中效果，可是不少時候咱們的文字並不知道具體有多少，可能有一行，也可能有不少行，那麼遇到多行文字的這種問題咱們要如何處理呢。

2）多行文本的垂直居中

對於多行文本的垂直居中咱們有不少種實現方式，咱們這裏逐個的來看一下；

一、使用display:table來實現

主要實現代碼：

display: table使塊狀元素成爲一個塊級表格;

display: table-cell;子元素設置成表格單元格;

vertical-align: middle;使表格內容居中顯示，便可實現垂直居中的效果;

具體的html與css的代碼就以下所示：

二、使用absolute與transform配合實現

主要實現代碼：

position:absolute; 首先給文本絕對定位；

left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別爲50%，再用transform向左（上）平移它本身寬度（高度）的50%，也就達到居中效果了。

具體的html與css的代碼就以下所示：

三、使用flex實現

主要實現代碼：

display: flex;設置 display 屬性的值爲 flex 將其定義爲彈性容器

align-items: center;定義項目在交叉軸（縱軸）上如何對齊，垂直對齊居中

justify-content: center; 定義了項目在主軸上的對齊方式，水平對齊居中

具體的html與css的代碼就以下所示：

好了，本篇文章就給你們說到這裏，你們本身動手寫一下看能不能寫出同樣的頁面效果出來，也能夠找一些相似的頁面本身練習一下。

轉載自：https://baijiahao.baidu.com/s?id=1622460301039180175&wfr=spider&for=pc