集装箱垂直居中对齐考虑页眉和页脚

我有代码：集装箱垂直居中对齐考虑页眉和页脚

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
    html, body { 
 
     height: 100%; 
 
    
 
    } 
 
    
 
    .container { 
 
     min-height: 200px; 
 
     max-height: 500px; 
 
     display: -ms-flexbox; 
 
      display: flex; 
 
      -ms-flex-pack: justify; 
 
      justify-content: space-between; 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      right: 0; 
 
      bottom: 0; 
 
      box-sizing: border-box; 
 
      max-width: 1440px; 
 
      margin: auto; 
 
     
 
      height: 100%; 
 
    } 
 
    header, footer { 
 
     height: 150px; 
 
     background: #ccc; 
 
    } 
 
    
 
    footer { 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 50px; 
 
     bottom: 0; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <header></header> 
 
    <div class="container"> 
 
    content blah blah blah 
 
    </div> 
 
    <footer> 
 
    fsdfsdfsdfsdfsdffdsadsfasd 
 
    </footer> 
 
</body> 
 
</html>

如何我可以垂直居中对齐这个容器，考虑到头部的高度和页脚（位置：绝对和高度）。我想，我们可以用display来做什么：flex，是怎么做到的？

我用引导3格

例jsbin：http://jsbin.com/timatozuco/edit?html,output

来源

2017-09-05 DronaxD

这里尝试..只要配置基于您的调整更新的代码..

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <style> 
    html, body { 
     height: 100%; 

    } 

    .container { 

      display: -ms-flexbox; 
      display: flex; 

      top: 10%; 
      left: 50%; 
      position: absolute; 

      box-sizing: border-box; 




    } 
    header, footer { 
     height: 150px; 
     background: #ccc; 
    } 

    footer { 
     position: absolute; 
     width: 100%; 
     height: 50px; 
     bottom: 0; 
    } 
    </style> 
</head> 
<body> 
    <header></header> 
    <div class="container"> 
    content blah blah blah 
    </div> 
    <footer> 
    fsdfsdfsdfsdfsdffdsadsfasd 
    </footer> 
</body> 
</html>

来源

2017-09-05 09:04:10 user8256287

如果我正确理解你的问题，然后我想你希望根据页眉和页脚大小将整个容器放在页面的中间位置。

所以下面的代码是解决

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>JS Bin</title> 
 
     <style> 
 
      html, body { 
 
       width: 100%; 
 
       height: 100%; 
 
       margin: 0; 
 
       padding: 0; 
 
      } 
 
    
 
      body { 
 
       font-family: arial, sans-serif; 
 
       font-size: 14px; 
 
       color: #000; 
 
       line-height: 22px; 
 
       text-decoration: none; 
 
      } 
 
    
 
      .wrapper { 
 
       width: 100%; 
 
       background: #fff; 
 
       margin: -128px auto 0; 
 
       height: 100%; 
 
       text-align: left; 
 
       clear: both; 
 
       display: table; 
 
       position: relative; 
 
       z-index: 1; 
 
      } 
 
      
 
      header { 
 
       width: 100%; 
 
       margin: auto; 
 
       background: #ccc; 
 
       height: 66px; 
 
       position: relative; 
 
       z-index: 2; 
 
       border-bottom: 20px solid #fff; 
 
      } 
 
      
 
      footer { 
 
       background: #ccc; 
 
       width: 100%; 
 
       margin: auto; 
 
       height: 22px; 
 
       clear: both; 
 
       border-top: 20px solid #fff; 
 
       position: relative; 
 
       z-index: 2; 
 
      } 
 
      
 
      .container { 
 
       vertical-align: middle; 
 
       display: table-cell; 
 
       padding: 128px 0 0; 
 
      } 
 
      
 
      .container .content { 
 
       text-align: center; 
 
       background: yellow; 
 
       padding: 0 10px; 
 
       width: 300px; 
 
       height: 200px; 
 
       margin: 0 auto; 
 
      } 
 
     </style> 
 
    </head> 
 
    
 
    <body> 
 
     <header> 
 
      Header content 
 
     </header> 
 
     <div class="wrapper"> 
 
      <div class="container"> 
 
       <div class="content"> 
 
        Container content 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <footer> 
 
      Footer content 
 
     </footer> 
 
    </body> 
 
</html>

，或者您也可以访问此链接：Codepen - centered container based on header & footer

来源

2017-09-05 09:14:21 Adeel

但是，如果使用自举3，我怎么能实现此代码？ – DronaxD

好吧，现在这是完全不同的问题，你之前没有提到过，但如果你使用Bootstrap，那么这可能会帮助你。 https://stackoverflow.com/questions/15641142/bootstrap-fill-fluid-container-between-header-and-footer – Adeel

@DronaxD现在你添加Bootstrap 3在你的问题:) – Adeel

集装箱垂直居中对齐考虑页眉和页脚

回答

相关问题