Html 垂直居中的引导div在调整大小时溢出窗口--如何防止？

我有一个垂直居中的标准引导网格布局

但是，在调整窗口大小时，div内容会溢出窗口，使顶部的div内容变得模糊。我怎样才能防止这种情况

请参见以下示例：

标题1
文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本

试试这个：

<div class="container">

 <div class="floating">


  <div class="row">
    <div class="col">
      <h1>
      Header 1
      </h1>
    </div>

  </div>

  <div class="row">
  <div class="col-md-12">
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> 
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
    </div>
</div>

---

这消除了溢出问题，但div不再垂直居中。

<div class="container">

 <div class="floating">


  <div class="row">
    <div class="col">
      <h1>
      Header 1
      </h1>
    </div>

  </div>

  <div class="row">
  <div class="col-md-12">
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> 
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
    </div>
</div>

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  word-break: break-all;

}
.container {
    position:relative;
}
.floating {
    float: left;
    position: absolute;
    left:25%;
    right:25%;
    top: 50%;
}