html - 使用 CSS3 设置内容中页

Question

<div style="width: 100%; position:fixed; display: block;" class="parent">
    <div class="child" style="width: 100%; height: 30px; ">mid</div>
</div>

我将使用 css 在中间页面中设置带有“子”类的 div。父 div 的位置将被固定。我该怎么办？

Answer 1

将元素定位在屏幕中心:

/* Staple class for V and H centered element */
.vertical-and-horizontally-centered-element {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* support for cross browser compatibility */
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

要将文本居中放置在元素的中心，请使用 text-align: center。在我们将您的所有代码放在一起后，您会得到以下结果:

.parent {
  width: 100%;
  height: 100%;
  position: fixed;
  display: block;
}

.child {
  height: 30px;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  /* support for cross browser compatibility */
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="parent">
    <div class="child">mid</div>
</div>

另一个评论，将你的内联 CSS 移动到它自己的 CSS 文件中，除非你出于特定原因必须将它保持内联......我的两分钱:-)

如果您在下面的评论中有任何问题，请告诉我。