Centrer verticalement un DIV sur une page HTML

Comment puis-je centrer verticalement mon DIV sur la page HTML? Je pensais qu'en définissant la marge à 0 auto ferait l'affaire, mais cela ne semble pas être le cas car elle ne centre qu'horizontalement et ne centre pas verticalement mon div #main sur la page.Centrer verticalement un DIV sur une page HTML

Voici un violon rapide: https://jsfiddle.net/stevdbbz/

Voici le code HTML et CSS en question:

<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
* { 
    font-family: Segoe UI; 
    font-size: 9pt; 
    box-sizing: border-box; 
} 
body { 
    background: rgb(70,70,70); 
    padding: 0; 
    margin: 0; 
} 
#main { 
    border: 1px solid rgb(180,180,180); 
    width: 800px; 
    height: 650px; 
    margin: 0 auto; 
} 
#boxA { 
    padding-top: 7px; 
    padding-bottom: 7px; 
    padding-left: 3px; 
    border-bottom: 1px solid rgb(180,180,180); 
    background: #FFF; 
} 
#boxB { 
    height: 573px; 
    width: 200px; 
    border: 0; 
    float: left; 
    background: #FFF; 
} 
#boxC { 
    background: rgb(240,240,240); 
    height: 573px; 
    width: 598px; 
    border-left: 1px solid rgb(180,180,180); 
    border-top: 0; 
    border-bottom: 0; 
    border-right: 0; 
    display: inline-block; 
} 
#boxD { 
    background: rgb(240,240,240); 
    border-top: 1px solid rgb(180,180,180); 
    height: 44px; 
    text-align: center; 
    display: table; 
    width: 100%; 
} 
#menu { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
#menu li { 
    padding: 4px; 
     border: 1px solid #FFF; 
} 
#menu li:hover { 
    cursor: pointer; 
} 
.selected { 
    background: rgb(51,153,255); 
    color: #FFF; 
    border: 1px solid #FFF; 
    font-weight: bold; 
} 
.hidden{ display:none; } 


.item { 
    width: 100%; 
    height: 100%; 
} 


input[type="button"] 
{ 
    cursor:pointer; 
    border: 1px solid #707070; 
    background-color: #F0F0F0; 
    border-radius: 4px; 
    box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD; 
    background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%); 
    padding: 3px 6px; 
    width: 75px; 
} 

input[type="button"]:hover 
{ 
    cursor:pointer; 
    background-color: #EAF6FD; 
    border: 1px solid #3C7FB1; 
    box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5; 
} 

input[type="button"][disabled], input[type="button"][disabled]:hover 

{ 
    border: 1px solid #ADB2B5; 
    text-shadow: 1px 1px #fff; 
    cursor:default; 
    background-color: #F4F4F4; 
    box-shadow: inset 0 1px 2px #fff; 
} 












</style> 

</head> 

<body> 

     <div id="main"> 

      <div id="boxA"><b>Application Title</b></div> 

      <div id="boxB"> 
       <ul id="menu"> 
        <li data-show="#1">Menu Item 1</li> 
        <li data-show="#2">Menu Item 2</li> 
        <li data-show="#3">Menu Item 3</li> 
       </ul> 
      </div> 

      <div id="boxC"> 
       <div id="1" class="hidden item"> 
        <b>Content Tab 1</b> 
       </div> 
       <div id="2" class="hidden item"> 
        Content Tab 2 
       </div> 
       <div id="3" class="hidden item"> 
        Content Tab 3 
       </div> 
      </div> 

      <div id="boxD"> 

       <div style="display: table-cell; vertical-align: middle;"> 
        <input type="button" value="Search" class="btn" disabled> 
        <input type="button" value="Save" class="btn" disabled> 
        <input type="button" value="Add" class="btn" disabled> 
        <input type="button" value="Clear All" class="btn"> 
        <input type="button" value="Delete" class="btn" disabled> 
        <input type="button" value="Export" class="btn" disabled> 
        <input type="button" value="Recall" class="btn" disabled> 
       </div> 

      </div><!-- End of Main --> 

</body> 

</html>

Source

2015-11-16 BobbyJones

double possible de (http://stackoverflow.com [Comment centrer verticalement un div pour tous les navigateurs?]/questions/396145/comment-verticalement-centre-un-div-pour-tous les navigateurs) – BiscuitBaker

[http://howtocenterincss.com/](http://howtocenterincss.com/) – hungerstar

Vous pouvez Centrer verticalement un élément relatif à la fenêtre utilisant 3 règles simples:

#main { 
    position: relative; 
    top: 50vh; // positions the top edge of the element 50% down the viewport 
    margin: -325px auto 0; // moves the top edge down the element by 325px (650px height/2) 

    border: 1px solid rgb(180,180,180); 
    width: 800px; 
    height: 650px; 
}

Source

2015-11-16 14:36:21 Rounin

Si votre fenêtre est plus petite que votre contenu, vous ne serez pas en mesure de voir le haut de la main div – Pete

Vous pouvez le faire par display:table;

Jsfiddle

Source

2015-11-16 14:33:22 Alex

Vous pouvez utiliser flexbox. Voici un exemple:

<div class="middle-align"> 
     <p>This is a vertically centered paragraph</p> 
    </div> 
</div>

et pour le css

.middle-align { 
    height:400px; 
    background-color:gray; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
}

https://jsfiddle.net/p6yoka9c/

Source

2015-11-16 14:38:53 Nikoto

Centrer verticalement un DIV sur une page HTML

Répondre

Questions connexes