由于块级元素的高度是可以设置的，所以对于块级元素的垂直居中比较简单。
方法一：
在不定高的情况下，把元素的上下内边距设为同一个值即可实现，即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;
}