Html 如何制作垂直和水平居中的盒式div容器

我正在尝试制作一个水平和垂直居中的div，它没有100%的宽度和高度，但有80%的宽度和高度。我只想在视口的正中央制作一个长方体。我避免使用vh和vw设备

我找到了这样的解决方案：

<div class="centered-box">
This is a box
</div>

这是可行的，但是当我使用BootStrap3的.container类时，这个容器会出现错误。内容也溢出了。我认为这是由于集装箱的绝对定位。我只是想要一个完全不同的概念。由于绝对定位，我不想使用这种方法。

试试这个

<div class="centered-box">
This is a box
</div>

---

中卫在a区总是很痛苦。 我发现这个网站非常有用：

试试看。 您必须回答一个非常简单的问题，即您不想将什么放在中心。

Html

<div class="outer">
   <div class="middle">
      <div class="inner">
         <div align="center">
            <h1>The Content</h1>

            <p>Once upon a midnight dreary...</p>
         </div>
      </div>
   </div>
</div>

---

但是这也适用于引导网格布局吗？非常感谢，它也适用于引导网格布局。

.centered-box {
    margin: 10% auto;
    width: 35%;
    padding: 20px;
    border: 1px solid black;
}

<div class="outer">
   <div class="middle">
      <div class="inner">
         <div align="center">
            <h1>The Content</h1>

            <p>Once upon a midnight dreary...</p>
         </div>
      </div>
   </div>
</div>

.outer {
   display: table;
   position: absolute;
   height: 100%;
   width: 100%;
}

.middle {
   display: table-cell;
   vertical-align: middle;
}

.inner {
   margin-left: auto;
   margin-right: auto; 
   width: /*whatever width you want*/;
}