如何制作垂直和水平居中的盒装div容器[重复]答案

【问题标题】：How to make a vertically and horizontally centered boxed div container [duplicate]如何制作垂直和水平居中的盒装div容器[重复]
【发布时间】：2016-09-15 03:31:45
【问题描述】：

我正在尝试制作一个水平和垂直居中的 div，它没有 100% 的宽度和高度，但宽度和高度都为 80%。我只想在视口的中心制作一个盒子。我正在避免使用 vh 和 vw 单位。

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

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

CSS 是

.centered-box {
 margin: auto;
 top:    0;
 left:   0;
 right:  0;
 bottom: 0;
 position: absolute;
 width: 80%;
 height: 80%;
 border: 1px solid black;
}

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

【问题讨论】：

标签： html twitter-bootstrap css

【解决方案1】：

试试这个

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

CSS

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

【讨论】：

【解决方案2】：

Center div 总是让人头疼。我发现这个非常有用的网站：http://howtocenterincss.com/

试一试。您让 tio 回答了关于您不会以什么为中心的非常简单的问题。

【讨论】：

【解决方案3】：

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>

CSS

.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*/;
}

【讨论】：

但这也适用于引导网格布局吗？
非常感谢它可以完美运行，也可以使用引导程序。