Center div with equal margins. Margin-bottom not working with height 100vh?

Question

No matter what I try to do, I can't get my div to have equal margins all the way around.

I assume margin-bottom/padding-bottom doesn't work when you set the height to 100vh or 100%?

I need it to be responsive so px values are no use here.

I've created a fiddle: 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;
}

score 1 · Accepted Answer · answered Jul 07 '17 at 12:17

Using this previous SO answer as a reference, I modified your fiddle to keep an even margin around the whole box. I did this specifically by setting the height and width smaller than the viewport and then translating the box to the middle of the screen:

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

Here's a snippet for easy viewing:

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>

Wow perfect! Thanks – Benjamin Gibbs710 Jul 08 '17 at 06:53 — Benjamin Gibbs710, Jul 08 '17 at 06:53

score 0 · Answer 2 · answered Jul 07 '17 at 11:59

Using the same percentage values for a margin will always make the top/bottom appear different then for left/right.

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.

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

If you still want to use a dynamic value for your margin, I would suggest either vh or vw.

Your example updated: https://jsfiddle.net/uLmkyqpf/2/

Center div with equal margins. Margin-bottom not working with height 100vh?

2 Answers2