动态处于屏幕中间的文本

Question

我有两个硬币。在右边的div中有一个文本。这篇文章必须总是在屏幕的中间。此外，文本永远不允许离开框。我要它有反应。因此，它可以在pc / tablet / phone等上工作。

这是我的小提琴：https://jsfiddle.net/ourn15f8/106/

​

.screen-1 {
  width: 500px;
  display: flex;
}

.div-1 {
  background-color: green;
  width: 100px;
}
.div-2 {
  background-color: red;
  width: 400px;
  text-align: center;
}

Total Width = Screen Width
<br><br>

Situation:
<div class="screen-1">
  <div class="div-1">logo</div>
  <div class="div-2">text</div>
</div>

Wanted:
<div class="screen-1">
  <div class="div-1" style="position: absolute">logo</div>
  <div class="div-2" style="width: 500px">text</div>
</div>
<div class="screen-1" style="width: 400px">
  <div class="div-1" style="position: absolute">logo</div>
  <div class="div-2" style="width: 300px">text</div>
</div>
<div class="screen-1" style="width: 300px">
  <div class="div-1" style="position: absolute">logo</div>
  <div class="div-2" style="width: 200px">text</div>
</div>
Text in the middle of screen
<br><br>
Also when screen to small, I want this:
<div class="screen-1" style="width: 150px">
  <div class="div-1">logo</div>
  <div class="div-2"  style="width: 50px">text</div>
</div>
 "text" is never allowed to leave the div

<br><br>
Info:<br> 
I dont want to use position absolute. The divs have to by dynamic so it works on pc and phone.

​

Answer 1

你可以使用网格来制作3个盒子，每个1fr，这样它们被均匀的间隔，然后把你的标志放在左边的一个，内容在中间的一个。然后，您可以使用flexbox将文本div放到中心div的中间，它本质上是屏幕的中心。

​

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: red;
}

.logo {
  background-color: green;
  width: 200px;
  margin-left: 0;
  margin-right: auto;
}

.textcontainer {
  display: flex;
  justify-content: center;
}

.container>div>div {
  padding: 0.5rem 0.25rem;
}

<div class='container'>
  <div class='logocontainer'>
    <div class='logo'>
      Logo
    </div>
  </div>
  <div class='textcontainer'>
    <div>
      <!-- Put your text here -->
      Text
    </div>
  </div>
  <div></div>
  <!-- this is a dummy container to push the text container to the middle of the screen -->
</div>

​