Container centre d'alignement vertical considérant en-tête et pied de page

J'ai le code:Container centre d'alignement vertical considérant en-tête et pied de page

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

Comment je peux centre aligner verticalement ce conteneur, étant donné la hauteur d'en-tête et pied de page (position: absolute et hauteur). Je pense, ce que nous pouvons faire avec display: flex, comment?

J'utilise Bootstrap 3 grille

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

Source

2017-09-05 DronaxD

essayer ici .. Il suffit de configurer le code mis à jour en fonction de votre réglage ..

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

Source

2017-09-05 09:04:10 user8256287

Si je comprends bien votre question, puis Je suppose que vous voulez faire le conteneur entier au centre de la page sur la base de la taille de l'en-tête et du pied de page.

donc ci-dessous le code est la solution

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

ou vous pouvez visiter ce lien: Codepen - centered container based on header & footer

Source

2017-09-05 09:14:21 Adeel

Mais si j'utilise bootstrap 3, comment je peux mettre en œuvre ce code? – DronaxD

bien, maintenant c'est une question complètement différente et vous ne l'avez pas mentionné plus tôt, mais dans le cas où vous utilisez Bootstrap alors peut-être cela pourrait vous aider. https://stackoverflow.com/questions/15641142/bootstrap-fill-fluid-container-between-header-and-footer – Adeel

@DronaxD maintenant vous avez ajouté Bootstrap 3 dans votre question :) – Adeel

Container centre d'alignement vertical considérant en-tête et pied de page

Répondre

Questions connexes