集裝箱垂直居中對齊考慮頁眉和頁腳

我有代碼：集裝箱垂直居中對齊考慮頁眉和頁腳

<!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

集裝箱垂直居中對齊考慮頁眉和頁腳

回答

相關問題