html - 如何制作垂直和水平居中的盒装div容器

This question already has answers here:

How to vertically center a container in Bootstrap?
（9个答案）
三年前关闭。
我正在尝试制作一个水平和垂直居中的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类时，这个容器会出现错误行为。内容也会溢出。我认为这是因为集装箱的绝对位置。我只是想要一个完全不同的概念。我不想用这种方法，因为绝对定位。

最佳答案

试试这个。

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

嘘。

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

关于html - 如何制作垂直和水平居中的盒装div容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37303117/