几种垂直居中的方式及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; 
        }