页脚怎么垂直居中

来源：2-7 编程练习

慕UI1013004

2019-10-15 19:16:09

这是我的代码和效果图

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body,html{
        padding:0;
        margin:0;
    }
    .header{
        width:100%;
        height:100px;
        background:#000;
        position:fixed;
        top:0;
    }
    .img{
      float:left;
      cursor: pointer;
    }
    .link{
      float:right;
      color:#fff;
      font-size:23px;
      font-family:"微软雅黑",sans-serif;
      padding:15px;
      margin:20px;
      cursor: pointer;
    }
    .container{
       margin-top:100px;
    }
    .container img{
      width:100%;
      height:auto;
      display:block;
      padding:0;
      margin:0;
    }
    .footer{
      width:100%;
      height:70px;
      background:#000;
      position:fixed;
      bottom:0;
      text-align:center;
    }
    .footer ul li{
      list-style:none;
      font:bold 20px "微软雅黑",sans-serif;
      color:#fff;
      display:inline-block;
      padding:20px;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
    <div class="img">
      <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
      </div>
      <div class="link">手记</div>
      <div class="link">猿问</div>
      <div class="link">实战</div>
      <div class="link">职业路径</div>
      <div class="link">课程</div>
  </div>
  <div class="container">
    <div><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="banner图"/></div>
    <div><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="banner图"/></div>
    <div><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="banner图"/></div>
  </div>
  <div class="footer">
    <ul>
      <li>网站首页</li>
      <li>企业合作</li>
      <li>人才招聘</li>
      <li>联系我们</li>
      <li>常见问题</li>
      <li>友情链接</li>
    </ul>
  </div>
</body>
</html>