元素居中的css寫法：

1. margin: 0 auto；水平居中
2. flex 佈局：上下垂直居中
3. position為absolute的時候使用left和top50%,然後再設定margin-top，margin-left值設為自己寬高的一半的負值。這樣也可以始終是一個元素上下垂直居中顯示。
   或者是：transform: translate(-50%,-50%); 把元素從上和左移元素寬高的50%。
4. text-align：文字，內聯（inline，inline-block）元素水平居中顯示
5. padding-top，padding-bottom設定固定，內容來撐開元素，可以使元素垂直居中。

6. 絕對定位子元素在父元素的居中：

   子元素樣式：
   margin: auto; 
   left: 0;
   right: 0;
   bottom: 0;
   top:0;
   

中文行高：在中文裡行高的概念如同是小學時的寫字本每兩行之間的高度，這就是直觀意義上的行高。

英文行高：但是在英文的世界裡面，行高指的是每兩行基線之間的距離。
學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，vertical-align中有top,middle,baseline,bottom與之是由關聯的。所以vertical-align一般和line-height一起使用

如果一個標籤沒有定義height屬性，那麼其最終表現的高度一定是由line-height起作用。

撐開div高度的不是文字的高度，而是line-height的高度。在一行文字裡面，文字預設是居中顯示的，所以一般把行的高度設定為同盒子的高度一樣來實現文字的居中。

長度不固定的文字的上下居中使用padding-top和padding-bottom

高度不一致的圖片的上下居中，使用line-height設定一個圖片的最大高度後再使用vertical-align: middle