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

  HTML部分：

    
小学部
    
思想品德、语文、数学、英语、计算机、科学、艺术等


    
中学部
    
思想政治、语文、数学、英语、物理、化学、历史、地理、生物、计算机、科学等


    
职业中专部
    
政治、语文、数学、英语、法律知识、文秘、计算机应用、汽车驾驶与维修、武术、军事擒拿格斗等

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;}

 

效果如下 ：