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的**就如下所示：
**
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...
元素水平垂直居中
給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...
元素水平垂直居中
只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...