居中 div，边距相等。底部边距不适用于高度 100vh？

Question

无论我尝试做什么，我都无法让我的 div 始终保持相等的边距。

我假设当您将高度设置为 100vh 或 100% 时 margin-bottom/padding-bottom 不起作用？

我需要它具有响应性，因此 px 值在这里没有用。

我创建了一个 fiddle：https://jsfiddle.net/uLmkyqpf/

代码：

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

对页边距使用相同的百分比值将始终使 top/bottom 看起来与 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

如果您仍想为保证金使用动态值，我建议您使用 vh 或 vw。

您的示例已更新：https://jsfiddle.net/uLmkyqpf/2/

Answer 2

使用 as a reference, I modified your fiddle在整个框周围保持均匀的边距。我通过将高度和宽度设置为小于视口然后将框平移到屏幕中间来专门做到这一点：

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

为了便于查看，这里有一个片段：

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>

居中 div，边距相等。底部边距不适用于高度 100vh？

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

html

css

height

margin