利用table-cell实现元素居中对齐

vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。所以要实现上下垂直居中对齐，可以采用如下样式

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

• 上面的设置方式相比设置line-height属性，可以兼容文字有多行的情形。

下面举例说明：

1. 创建Html元素

   <div>
   	<span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
   </div>

2. 设置css样式

   div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

3. 观察显示效果