Question

在个人网页设计项目上取得了进展，但我一直陷入p内section标记的垂直居中位置。

我希望此部分内的文字垂直居中，但我不想失去任何响应能力。我已经尝试了许多可能的解决方案，但我一直在搞砸。你们中的任何一位专家都能看到快速修复吗？

HTML

<div class="box">
  <section>
    <p>Some text</p>
  </section>
</div>

CSS

body {
  background-color: white;
  margin: 0;
  overflow: auto;
}

.box {
  display: block;
  float: left;
  height: 100vh;
  width: 100vw;
  background-color: green;
  position: relative;
}

.box section {
  display: block;
  text-align: center;
  height: 20%;
  width: 70%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: solid .2em white;
}

.box section p {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}


}

}

那里肯定是多余的css（部分原因是我把它拿出来的项目中的人工制品），但我可以看到我遇到的问题。

Answer 1

这是一个关于中心事物的好资源 - https://www.w3.org/Style/Examples/007/center.en.html

使用现有的CSS，您可以在top: 50%; transform: translateY(-50%);元素上应用p以使其垂直居中。

＆＃13;

body {
  background-color: white;
  margin: 0;
  overflow: auto;
}

.box {
  display: block;
  float: left;
  height: 100vh;
  width: 100vw;
  background-color: green;
  position: relative;
}

.box section {
  display: block;
  text-align: center;
  height: 20%;
  width: 70%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: solid .2em white;
}

.box section p {
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  position: absolute;
}

＆＃13;

<div class="box">
  <section>
    <p>Some text</p>
  </section>
</div>

＆＃13;

您还可以使用display: flex; justify-content: center; align-items: center;家长p来p水平和垂直居中

＆＃13;

body {
  background-color: white;
  margin: 0;
  overflow: auto;
}

.box {
  display: block;
  float: left;
  height: 100vh;
  width: 100vw;
  background-color: green;
  position: relative;
}

.box section {
  display: block;
  text-align: center;
  height: 20%;
  width: 70%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: solid .2em white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box section p {
  margin: 0;
}

＆＃13;

<div class="box">
  <section>
    <p>Some text</p>
  </section>
</div>

＆＃13;

Answer 2

您可以使用以下设置section设置Flexbox容器（这会使所包含的p标记的所有设置变得多余）：

.box section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 20%;
  width: 70%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: solid .2em white;
}

完整解决方案请参见此处：https://jsfiddle.net/7ag8jqtu/

以响应方式垂直居中文本

2 个答案: