幾種垂直居中的方式及CSS圖片替換技術

因爲塊級元素的高度是能夠設置的，因此對於塊級元素的垂直居中比較簡單。

方法一：

在不定高的狀況下，把元素的上下內邊距設爲同一個值便可實現，即padding ：10px   0;

以上方法針對塊級元素和行內元素均可以。

方法二：

line-height:（只針對行內元素可行)

將行高設置成和父元素的高度相等，就能夠實現行內元素的垂直居中了。

因爲行內元素的對其方式是基線對齊，因此當圖片和文字位於一列時，呈現出來的效果每每不是咱們想要看到的樣子，

咱們要想將裏面的元素都實現垂直居中，就應該分別對每一個元素設置vertical-align:middle,還應該把元素的行高都設置爲父元素的高度，

這樣每一個元素都能實現垂直居中。

若是是塊級元素想要用此方法實現垂直居中，則應該對其設置：display：inline-block;

方法三：

對父元素設置：position：relative；

對元素自己：

假設元素的高度爲100px,以下：

　　　　　　position：absolute；

　　　　　　top:50%;

　　　　　　margin-top:-50px;

top設置爲50%以後，元素的頂部會出如今父元素高度的一半處，再用margin-top設置元素往上移動自己一半的高度，就能夠實現垂直居中了。

 

css圖片替換技術：

css圖片替換技術利於搜索引擎識別網站的信息：     爲了保障可閱讀性、搜索優化以及性能優化，咱們不方便直接使用 img 標籤來加載圖片，     而是使用 CSS 設置背景圖片來達到替換文字的效果；     .hide-­‐text  {              overflow:  hidden;              text-­‐indent:  100%;            white-­‐space:  nowrap;          }          .mylogo  {              display:  block;              width:  88px;              height:  31px;              background:  url(img/logo.jpg)  no-­‐repeat;          }     <a  class="hide--text  mylogo"  target="_blank"  href="http://ciaoca.com">ciaoca</a>     還能夠經過設置行高來實現隱藏文字，好比：     .hide-­‐text  {              overflow:  hidden;              line-height:500px;            white-­‐space:  nowrap;          }