Question

我想制作一个结构：顶部，中部和底部。我希望顶部从顶部开始是30px，从底部开始是30px，中间的文本从底部到顶部的距离完全相同（这是我的主要问题）。当然，我的目标是适应所有决议。

提前致谢：）

Answer 1

您可以使用绝对定位您可以使用Codepen link here

HTML：

<div id="top">this is top</div>

<div id="middle">
  <span class="full_center">middle is here</span>
</div>

<div id="bottom">bottom down below</div>

CSS：诀窍在于.full_center类

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

#top {
  background-color: #ccc;
  height: 30px;
  position: relative;
  top: 30px;
}

#middle {
  background-color: aliceblue;
  min-height: calc(100vh - 60px);
  height: auto;
}

#bottom {
  height: 30px;
  background-color: #ccc;
  position: relative;
  bottom: 30px;
}


.full_center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

Answer 2

尝试使用display:flex;。它是我能从你的问题中得出的最接近的。在这里，我使用background-color:red;来显示距离顶部和底部30px的距离。

＆＃13;

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.outer{
  width:100%;
  height:100vh;
  background-color:red;
  padding:30px 0;
}
.inner{
  height:100%;
  width:100%;
  background-color:green;
  display:flex;
  align-items:center;
}
p{
  width:60%;
  margin:0 auto;
  text-align:center;
  color:white;
  font-size:2em;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <p>This is text<br>
    This is text<br>
    This is text<br>
    This is text<br></p>
    </div>
  </div>

＆＃13;

帮助集中精力

2 个答案: