<div> <div>我也是一段测试文本</div> </div> css代码： #box { width: 300px; height: 300px; background: #ddd; display: table; } #child { display: table-cell; vertical-align: middle; }
运行结果如下：
这里关于vertical-align啰嗦两句：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。
valign属性规定单元格中内容的垂直排列方式，语法：<td valign="value">，value的可能取值有四种：
top：对内容进行上对齐
middle：对内容进行居中对齐
bottom：对内容进行下对齐
baseline：基线对齐
关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
上次已经为大家介绍了 实现css文字垂直居中的8种方法 这篇文章又为大家新增了3种CSS垂直居中的方法，更多关于CSS垂直居中的方法请阅读下面的相关文章
您可能感兴趣的文章: