由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单。

方法一:

在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即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; 
        }