试试这个：

* {
  font-size: 16px;
  font-family: 'playfair_displayblack';

}

.container {
  position: relative;
  padding-top: 100px;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.central {
  display: flex;
  width: 66vw;
  height: 55vh;
  z-index: 2;
}

.left {
  flex: 1;
}

.right {
  flex: 2;
  background-color: #2b563b;
  overflow: hidden;

}

.belle {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border: 9px solid whitesmoke;
}

.bas {
  display: flex;
  flex-direction: row;

}

.pied {
  bottom: 100px;
  width: 90vw;
  height: 30vh;
  margin-left: auto;
  margin-right: auto;
}

.pied {
  font-weight: bolder;
  font-family: serif;
  position: absolute;
  width: 0px;
  overflow: visible;
  bottom: 35%;
  left: 50%;
}

.pied h1 {
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  font-size: 16rem;
  transform: translate(-50%, 0);
  font-family: 'playfair_displayitalic';
  top: 0;
  left: 50%;
}

<main class="container">

  <div class="central">

    <div class="left">
      <img src="images/chantal.jpg" alt="" class="belle">
    </div>
    <div class="right">

      <section>
        <header>
          <h1> <span>strategy</span> </h1>
        </header>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </p>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </section>
    </div>
  </div>
  <div class="pied"><h1>lucette</h1></div>
</main>

请注意，您可能需要调整.pied的bottom属性，因为我没有该字体。
你代码中的主要问题是你没有为文本的主容器设置position: absolute。我做了一些调整来确保文本也居中等等。

使用绝对位置会从正常的页面流中删除项，并且经常会导致隔离和z索引错误。
我附加了一个使用网格布局来叠加项目的方法。网格通常更容易调试。
需要说明的是，可以使用绝对位置，这只是一种选择。

section {
  display: grid;
}

.behind {
  height: 5rem;
  width: 5rem;
  background-color: red;
  grid-area: 1 / 1;
}

.front {
  height: 3rem;
  width: 3rem;
  background-color: blue;
  /*  Can also use grid-area  */
  grid-column: 1;
  grid-row: 1;
}

<section>
  <div class="behind"></div>
  <div class="front"></div>
</section>

enter image description here
现在的结果是更好的，但问题是，现在我想移动块中心ho包含图片和文本在页面中间，但我不能