Centre div avec des marges égales. Margin-bas ne fonctionne pas avec hauteur 100vh?

Question

Peu importe ce que j'essaie de faire, je ne peux pas obtenir mon div pour avoir des marges égales tout autour.

Je suppose que marge inférieure/rembourrage-fond ne fonctionne pas lorsque vous définissez la hauteur à 100 vh ou 100%?

J'ai besoin qu'il soit réactif pour que les valeurs px ne servent à rien ici.

J'ai créé un violon: https://jsfiddle.net/uLmkyqpf/

code:

HTML:

<div class="mySec header"> 
    <div class="info"> 
     <ul id="headList"> 
     <li> 
      <a data-section="top-left" id="link" href="#">ABOUT</a> 
     </li> 
     <li> 
      <a data-section="getInvolved" id="link" href="#">CLASSES</a> 
     </li> 
      <li> 
      <a data-section="footer" id="link" href="#">CONTACT</a> 
     </li>    
     </ul> 
     <h1 class="title">Niki Gibbs Modern Pilates</h1> 
     <p class="title2">Working From The Inside Out.</p> 
     <img id="pilLogo" src="pilatesLog.png"> 
    </div> 
</div> 

CSS:

body { 
margin: 0; 
padding: 0; 
font-family: 'Josefin Sans', sans-serif; 
background-color: #EFEFEF; 
text-align: center; 
overflow: hidden; 
height: 100%; 
width: 100%; 
} 
.mySec { 
    position: relative; 
    height: 100%; 
    margin-right: 4%; 
    margin-left: 4%; 
    margin-top: 4%; 
    padding-bottom: 4%; 
    overflow: hidden; 
} 
.header { 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(#FFC0CB, #9370DB); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(#FFC0CB, #9370DB); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#FFC0CB, #9370DB); /* For Firefox 3.6 to 15 */ 
} 
#headList { 
    list-style: none; 
    font-family: 'Josefin Sans', sans-serif; 
    position: relative; 
    left: -1vw; 
} 
#headList li { 
    display: inline; 
} 
#headList li a { 
    color: #000; 
    font-size: 1.4vw; 
    padding: 2vw; 
    text-decoration: none; 
    letter-spacing: 2px; 
    font-weight: 200; 
} 
.title { 
    font-family: 'Amatic SC', cursive; 
    font-size:8vw; 
    position: relative; 
    bottom: 8.3vh; 
    color: #000; 
} 

.title2 { 
    color: #000; 
    position: relative; 
    font-size: 2vw; 
    bottom: 14vh; 
} 
#pilLogo { 
    position: relative; 
    left: 25vw; 
    bottom: 41vh; 
} 
.info { 
    position: relative; 
    top: 25vh; 
} 

Answer 1

En utilisant this previous SO answer comme référence, je modified your fiddle de garder une marge même autour de la boîte entière. Je l'ai fait spécifiquement en réglant la hauteur et largeur inférieure à la fenêtre, puis traduire la boîte au milieu de l'écran:

.mySec { 
    display: block; 
    position: relative; 
    height: calc(95vh); 
    width: calc(96vw - 1vh); 
    transform: translate(calc((4vw + 1vh)/2), 2.5vh); 
    overflow: hidden; 
} 

Voici un extrait pour faciliter la visualisation:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    background-color: #EFEFEF; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.mySec { 
 
    display: block; 
 
    position: relative; 
 
    height: calc(95vh); 
 
    width: calc(96vw - 1vh); 
 
    transform: translate(calc((4vw + 1vh)/2), 2.5vh); 
 
    overflow: hidden; 
 
} 
 

 
.header { 
 
    background: red; 
 
    /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(#FFC0CB, #9370DB); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#FFC0CB, #9370DB); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#FFC0CB, #9370DB); 
 
    /* For Firefox 3.6 to 15 */ 
 
} 
 

 
#headList { 
 
    list-style: none; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    position: relative; 
 
    left: -1vw; 
 
} 
 

 
#headList li { 
 
    display: inline; 
 
} 
 

 
#headList li a { 
 
    color: #000; 
 
    font-size: 1.4vw; 
 
    padding: 2vw; 
 
    text-decoration: none; 
 
    letter-spacing: 2px; 
 
    font-weight: 200; 
 
} 
 

 
.title { 
 
    font-family: 'Amatic SC', cursive; 
 
    font-size: 8vw; 
 
    position: relative; 
 
    bottom: 8.3vh; 
 
    color: #000; 
 
} 
 

 
.title2 { 
 
    color: #000; 
 
    position: relative; 
 
    font-size: 2vw; 
 
    bottom: 14vh; 
 
} 
 

 
#pilLogo { 
 
    position: relative; 
 
    left: 25vw; 
 
    bottom: 41vh; 
 
} 
 

 
.info { 
 
    position: relative; 
 
    top: 25vh; 
 
}

<div class="mySec header"> 
 
    <div class="info"> 
 
    <ul id="headList"> 
 
     <li> 
 
     <a data-section="top-left" id="link" href="#">ABOUT</a> 
 
     </li> 
 
     <li> 
 
     <a data-section="getInvolved" id="link" href="#">CLASSES</a> 
 
     </li> 
 
     <li> 
 
     <a data-section="footer" id="link" href="#">CONTACT</a> 
 
     </li> 
 
    </ul> 
 
    <h1 class="title">Niki Gibbs Modern Pilates</h1> 
 
    <p class="title2">Working From The Inside Out.</p> 
 
    <img id="pilLogo" src="pilatesLog.png"> 
 
    </div> 
 
</div>

Answer 2

En utilisant les mêmes valeurs de pourcentage pour une marge sera toujours faire en sorte que le haut/bas apparaisse différent alors pour gauche/droite.

Le pourcentage est calculé par rapport à la largeur du bloc conteneur de boîte générée . Notez que ceci est également vrai pour 'margin-top' et 'margin-bottom'.

https://www.w3.org/TR/CSS2/box.html#propdef-margin

Si vous voulez continuer à utiliser une valeur dynamique pour votre marge, je suggère soit vh ou vw.

Votre exemple mis à jour: https://jsfiddle.net/uLmkyqpf/2/