1、文字垂直居中
單行文字的垂直居中只需要將元素的line-height與height設定為相同即可。
2、用margin: auto;實現
在元素被絕對定位的情況下，margin: auto; 在垂直方向將不起作用。
在使用margin: auto; 前先來區分兩個屬性，left與margin-left
left、right、top、bottom這類的屬性生效的前提是其父容器有position屬性，這時，給left等設值就相當於給div設定乙個活動區域。分為以下幾種情況
①left、right、top、bottom都沒設值，div將預設為父元素左上角的位置，即left: 0; top: 0; ，但這種預設值一旦有相關屬性被設定以後就會消失。
②左右或者上下只設定乙個屬性，將確定div的起始位置。
③若同時給div設定上下或者左右屬性，將確定div的活動範圍。如
將left和right同時設定為0時，div的活動範圍就為其父容器的寬度即流體屬性，這時再將div設定乙個margin: auto;屬性，該div將水平居中。
margin無論父容器有沒有position屬性都起作用，其中margin-left，margin-top均是相對父容器的padding屬性而言的，而margin-right，margin-bottom將不能改變div的位置，但能影響其後div的位置。
既然這裡講到了margin，那順便再來提一下外邊距疊加的問題，
外邊距的疊加常見的有一下兩種情況：
①當兩個或多個垂直外邊距相遇時，他們將形成乙個外邊框，其外邊框為發生疊加的兩相鄰邊框中較大的乙個。
②在非絕對定位的情況下，當乙個div包含在另乙個div內的時候他們的頂外邊距和底外邊距也會發生上述的疊加情況。（若是父容器已經設定了高度，則裡面div的高度將不會對其高度產生影響）
3、在設定了絕對定位的情況下直接調位置
①調top，margin-top：
top: 50%; margin-top: -(0.5width);
②利用transform屬性：
transform：translate(0,50%);
transform與top不同的是，top居中的時候不會考慮到自身寬度，但是transform會。
4、vertical-align
一般被用來調節在文字中的位置，常用的屬性值有：text-top; （父元素字型頂端），text-bottom，top（行中最高元素頂端），bottom，middle等。
水平垂直居中的方式
div絕對定位水平垂直居中 margin 負間距 這或許是當前最流行的使用方法。div div絕對定位水平垂直居中 transforms 變形 div css不定寬高水平垂直居中 box box div 將父盒子設定為table cell元素，可以使用text align center和vertic...
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...
元素水平居中和垂直居中的方式
關於居中的問題，一直處於疑惑不解的狀態，知道的幾種方法好像也不是每一次都會起到作用，所以更加迷惑。主要是不清楚該 在什麼情況下採用哪種解決方法，所以，整理了一些方法，梳理一下思路，做乙個總結。對於單行文字，可以設定它的行高等於它父容器的高度，這樣就實現了該文字的垂直居中，但是此方法只適用於單行文字。...