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

Posted 2023-03-05

【中文标题】如何制作垂直和水平居中的盒装div容器[重复]

【英文标题】：How to make a vertically and horizontally centered boxed div container [duplicate]

【发布时间】：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 类时，这个容器行为不端。内容也溢出。我认为这是由于容器的绝对定位。我只是想要一个完全不同的概念。由于绝对定位，我不想使用这种方法。

【参考方案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*/;

【讨论】：

但这也适用于引导网格布局吗？

非常感谢它可以完美运行，也可以使用引导程序。