CSS实现单行，多行文本均垂直居中

  HTML部分：

<dl>
    <dt>小学部</dt>
    <dd>思想品德、语文、数学、英语、计算机、科学、艺术等</dd>
</dl>
<dl>
    <dt>中学部</dt>
    <dd>思想政治、语文、数学、英语、物理、化学、历史、地理、生物、计算机、科学等</dd>
</dl>
<dl>
    <dt>职业中专部</dt>
    <dd>政治、语文、数学、英语、法律知识、文秘、计算机应用、汽车驾驶与维修、武术、军事擒拿格斗等</dd>
</dl>

CSS部分： 

dl{display: table;}
dt{width:200px; height:78px; line-height:78px; text-align:center; color:#fff; font-size:24px;}
dd{background:#fff; width:360px; height:58px;display:table-cell; padding:10px 20px;line-height:18px; vertical-align:middle;}
dl:nth-child(1) dt{background:#e8322d;}
dl:nth-child(2) dt{background:#d5211c;}
dl:nth-child(3) dt{background:#c11511;}

 

效果如下 ：