inline-block垂直居中的方法

可以控制图片、文字等行内元素在行内的垂直方向上的对齐方式

如何使用vetical-align使块级元素垂直居中？

以下面为例：

body{

some content

}

1、为父容器wrapper设置高度

html,body{

height:100%

}

.wrapper{

height:100%

}

2、使content容器变为行内元素

.content{

display:inline-block;

}

3、利用before伪元素在content容器之前构造一个空内容的inline-block

.wrapper:before{

content:"";

display:inline-block;

height:100%;

vetical-align:middle;

}

此时，整个页面只有一行，其中有两个inline-block，让空内容行内上下对齐

4、为content容器添加vetical-align属性

.content{

vetical-align:middle;

}

这样，块级元素在浏览器中始终都是垂直对齐的