Html 使用CSS3设置页面中间的内容 中间

我将使用css在中间页面中使用'child'类设置div。 父div的位置将是固定的。

---

我必须怎么做？

要在屏幕中居中放置元素：

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

要将文本居中放置在元素的中心，请使用

text align:center

。将所有代码组合在一起后，您将得到以下结果：

.parent{
宽度：100%；
身高：100%；
位置：固定；
显示：块；
}
.孩子{
高度：30px；
位置：固定；
最高：50%；
左：50%；
文本对齐：居中；
转换：翻译（-50%，-50%）；
/*支持跨浏览器兼容性*/
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

中间

以下是以一切为中心的内容：

/* 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%);
}

.parent{background-color: lightblue;}
.child{
  background-color: lightgreen;
  text-align: center;
  margin-left: 50%;

  position: relative;
  top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }