Horizontal Split with Text Below and Above the Split-CodePudding

I want to create a page which is split by a box above a horizontal line and one below the horizontal line. Just above and below the line I want to have a text. I came up with a solution with flex and 4 divs where I adjust the height of each div to around 30%-20%-20%-30%. However when going responsive this sometimes keeps the text crossing the horizontal line. I want to guarantee that the above text stays above and the below text stays below.

Here my solution is - https://codepen.io/tobwun/pen/VwWRGWY

body,
html {
  height: 100%;
  width: 100%;
}

.m {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 2em;
}

.d1 {
  background-color: pink;
  width: 100%;
  height: 30%;
}

.d2 {
  background-color: pink;
  width: 100%;
  height: 20%;
}

.d3 {
  background-color: lightblue;
  width: 100%;
  height: 20%;
}

.d4 {
  background-color: lightblue;
  width: 100%;
  height: 30%;
}

<body>
  <div class="m">
    <div class="d1">
    </div>
    <div class="d2">
      ABOVE TEXT
    </div>
    <div class="d3">
    </div>
    <div class="d4">
      BELOW TEXT
    </div>
  </div>
</body>

I was wondering if it would be possible with two divs and some padding? With the first one the text on the bottom and the second one the text on top.. If this by design is not recommended to be done with flexbox I am also open for another solution.

Thanks for any help!

CodePudding user response：

Why not just use two elements, and use align-items and justify-content to place them as you want ?

body,
html {
  height: 100%;
  width: 100%;
}

.m {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align:center;
}

.top, .bottom{
  width: 100%;
  height: 50%;
  display:flex;
  justify-content:center;
}

.top {
  background-color: pink;
  align-items:flex-end;
  padding-bottom:0.5em;
}

.bottom {
  background-color: lightblue;
  align-items:flex-start;
  padding-top:0.5em;
}

<body>
  <div class="m">
    <div class="top">
      ABOVE TEXT
    </div>
    <div class="bottom">
      BELOW TEXT
    </div>
  </div>
</body>

CodePudding user response：

Easiest way to solve this is to use position: absolute;.
top: 50%; will put the element below the vertical center line.
bottom: 50%; will put the element above the vertical center line.

body {
  margin: 0;
  min-height: 100vh;
}

.top-text {
  position: absolute;
  bottom: 50%;
}

.bottom-text {
  position: absolute;
  top: 50%;
}

.top-text,
.bottom-text {
  left: 0;
  right: 0;
}





/* for styling purpose only */
body {
  background: linear-gradient(darkblue 0% 50%, darkred 50% 100%);
  color: white
}

.top-text,
.bottom-text {
  text-align: center;
  font-size: 2em;
  border: 1px solid white;
  padding: 5px;
}

<div class="top-text">Top</div>
<div class="bottom-text">Bottom</div>