老师，这里的第二部分的整体水平居中和垂直居中应该怎么实现，谢谢！

<!DOCTYPE html>
<html>
    <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;}
    .warp1{    
              height:80px;
              width: 100%;
              background-color: #14191e;              
           /*在此补充代码*/
              line-height:80px;
              text-align:center;
              display:table;
             }

     .warp1 h1{ color:#fff;
                font-size:24px;
       /*在此补充代码*/ }
      

     .warp2{
              display:table-cell;
              vertical-align:middle;
              text-align:center;
              height:400px;
              width: 100%;
              border:1px  #14191e solid;
              ？？？？？/*在此补充代码*/                    
             }

     .content{    
              ？？？？/*在此补充代码*/
              }

     .content  p{ width:500px;
                  font-family: "微软雅黑";
                  margin:0 auto;
                  text-align:left;
                  font-size:14px;
        /*在此补充代码*/}   

   </style>
</head>
<body>
<div class="warp1">
          <h1>欢迎来到慕课网</h1>      
</div>
  <div class="warp2">
        <div class="content">
           <p>慕课网，只学有用的！</p>
           <p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
     </div>
</div>

SiuNam 2017-10-31

源自：CSS文本样式 3-12 编程练习

收起

1回答

卡布琦诺 2017-10-31 16:15:24

想要使用display:table-cell;vertical-align:middle;实现整体居中，则需要给父级元素（即.warp2）设置display: table;然后给子级（即content）设置display:table-cell;vertical-align:middle;希望可以帮到你~

收起回答

提问者 SiuNam #1

老师那我这个代码符合题目要求吗？

2017-10-31 16:25:46
卡布琦诺回复提问者 SiuNam #2

你按照上面我回答的把代码改了，实现居中，修改后就符合题意了，祝学习愉快~

2017-10-31 16:28:16
提问者 SiuNam 回复卡布琦诺 #3

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vertical-align</title> <style type="text/css"> *{padding:0px;margin: 0px;} .warp1{ height:80px; width: 100%; background-color: #14191e; /*在此补充代码*/ line-height:80px; text-align:center; } .warp1 h1{ color:#fff; font-size:24px; /*在此补充代码*/ } .warp2{ display:table; height:400px; width: 100%; border:1px #14191e solid; ？？？？？/*在此补充代码*/ } .content{ ？？？？/*在此补充代码*/ display:table-cell; vertical-align:middle; } .content p{ width:500px; font-family: "微软雅黑"; margin:0 auto; font-size:14px; /*在此补充代码*/} </style> </head> <body> <div class="warp1"> <h1>欢迎来到慕课网</h1> </div> <div class="warp2"> <div class="content"> <p>慕课网，只学有用的！</p> <p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p> </div> </div> </body> </html> 老师，这和题目要求的不一样，我已经按照你的改了...

2017-10-31 22:46:26