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