單行文字的居中
水平居中：text-align:center
垂直居中：line-height:~px (px前的數字為元素坐在行的行高)
多行文字的垂直居中
1）使用diaplsy:table來實現
display: table使塊狀元素成為乙個塊級**
display: table-cell;子元素設定成**單元格
vertical-align: middle;使**內容居中顯示
即可實現垂直居中的效果;
2）使用absolute與transform配合使用
position:absolute; 首先給文字絕對定位；
left:50%;top:50%;transform:translate(-50%,-50%)
讓文字距離盒子左邊和上邊分別為50%
再用transform向左（上）平移它自己寬度（高度）的50%
也就達到居中效果了。
3）使用flex實現
display: flex;設定 display 屬性的值為 flex 將其定義為彈性容器
justify-content: center; 定義了專案在主軸上的對齊方式，水平對齊居中
align-items: center;定義專案在交叉軸（縱軸）上如何對齊，垂直對齊居中
元素垂直居中和水平居中
在此之前先要設定好高度和寬度 要是單行資料 垂直居中 1 可以用傳統的line height和height相等就可以 2 使用vertical align middle 此時該元素的display要設定為table cell，並且子元素必須是行級元素才可以。水平居中 1 text align cen...
水平居中和垂直居中
行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...
元素水平居中和垂直居中的方式
關於居中的問題，一直處於疑惑不解的狀態，知道的幾種方法好像也不是每一次都會起到作用，所以更加迷惑。主要是不清楚該 在什麼情況下採用哪種解決方法，所以，整理了一些方法，梳理一下思路，做乙個總結。對於單行文字，可以設定它的行高等於它父容器的高度，這樣就實現了該文字的垂直居中，但是此方法只適用於單行文字。...