Css 了解div如何使用bootstrap 4居中

我遇到了一些代码，它很好地将我使用的登录框居中。但后来我意识到我实际上希望我的登录框距离左边25%，而不是50%。然而，我不知道代码实际上是如何工作的。当我搜索居中元素时，它建议将左：x%和-x/2%的边距与绝对值放在一起。这段代码不做这些，但可以工作

我不确定它是如何工作的，但我想知道是否有人可以解释，让我可以摆弄它重新定位

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Responsive {
  width: 50%; 
  height: 50%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

<div class="container">
    <div class="row">
        <div class="Absolute-Center is-Responsive" style="text-align: center>
            hello
        </div>
    </div>
</div>

。绝对中心{
保证金：自动；
位置：绝对位置；
顶部：0；左侧：0；底部：0；右侧：0；
}
.Absolute-Center.is-Responsive{
宽度：50%；
身高：50%；
最小宽度：200px；
最大宽度：400px；
填充：40px；
}
div正确居中，但其内部的内容未居中。因此，您需要使用
display:flex
来分配绝对div的内容

我在这里更新了小提琴
在bootstrap中，小提琴非常容易：

<div class="container">
 <div id="box" class="offset-3"> box content </div>
</div>


盒子内容

bootstrap网格系统由行和列组成，是一个移动优先的框架


偏移量：是元素的左侧空间，在本例中，3表示列数，因为网格系统由12列组成，3等于25%

您可能还想看看。

。绝对中心{
保证金：自动；
位置：绝对位置；
顶部：50%；左侧：50%；
转换：翻译（-50%，-50%）；
}
.Absolute-Center.is-Responsive{
宽度：50%；
身高：50%；
最小宽度：200px；
背景色：黑色；
最大宽度：400px；
填充：40px；
}

你好
以您提到的内容为中心的Div有点棘手，让我解释一下
首先，你的div是绝对的，从四面八方伸展。这就导致了这一点


。绝对中心{
保证金：自动；
位置：绝对位置；
背景：红色；
顶部：0；左侧：0；底部：0；右侧：0；
}
Bootstap3和Bootstrap4之间的主要、核心的区别在于，基本网格系统正在从使用浮点数进行对齐改为使用Flexbox

因此，了解flexbox是很重要的，甚至除了引导之外也是有用的。幸运的是，这也很容易

Flexbox需要两件事：

父容器（例如DIV、section、aside、p等）

一个或多个子元素（例如div、p、img等）

在父项上打开flexbox，
显示：flex

然后，有各种各样的开关（只有少数开关）。有些是在父级上设置的（如
justify content
），但其他可能是在项目上设置的（如
flex-grow:1
）

由于您希望了解如何正确管理此问题，因此我建议您花20分钟时间阅读以下优秀、快节奏的flexbox教程：


对于Flexbox

观看本教程，30分钟后您的问题将得到解决——您将了解flexbox。

另外，我与视频或其演示者没有任何联系-我很幸运地发现了它，现在将其传递给大家。
在Bootstrap 4中，您需要连续添加两个简单类。你需要使用位置

。绝对中心{
保证金：自动；
位置：绝对位置；
顶部：0；左侧：0；底部：0；右侧：0；
}


.Absolute-Center.is-Responsive{
宽度：50%；
身高：50%；
最小宽度：200px；
最大宽度：400px；
填充：40px；
背景：红色；
}

你好
但根据内容的宽度，它不会正好是25%，这就是为什么使用了
绝对值
和其他一些技巧，我认为偏移量不取决于元素的宽度，它在左侧提供了3列空间，因此如果box是主体的子项，它将在左侧有25%的空间。Bootstrap有一个非常可靠且经过测试的网格系统，感谢您提供如此全面的答案。我打了一个大大的回信，这样我就明白了我所困惑的是什么。我没想到会设置一个宽度使它居中，我想它会把它倒在左边。我想这是很聪明的，如果你想让它在所有的角落里，它能做的最接近最大宽度的就是居中。我不知道你为什么要用前40%。它不是以0为中心吗？我对另一个项目使用了
top:40%
。因此，您可以根据自己的喜好进行调整。正如你在问题中提到的，你需要这样的东西。还添加了一个额外的定心方法。：）@NibblyPigWouldn
top:40%
是否意味着它在屏幕下方70%的位置，如果我说的是对的话？因为屏幕下方的40%意味着剩下60%，所以除以2。。。设置最小/最大高度似乎没有任何作用…@NibblyPig注意该示例中的CSS设置。我删除了所有内容，只添加了您的定位，一个
top:40%
意味着它将始终从顶部定位40%。当屏幕调整大小时，它仍然是顶部的40%，因为总数减少了。如果我看不清楚，就试试文档，这样就不会考虑物品的高度了？谢谢，我下班回家后会看教程的！哦，老兄，那个视频太棒了，我真希望我两年前就看到了！这正是我的感受。某个地方有一所常春藤联盟大学缺少最好的老师。希望了解flexbox及其功能将有助于您解决此问题和未来的对齐问题。我们回答你的问题了吗？如果有更多我们可以帮助的，请添加评论或编辑您的问题，让我们知道。否则，如果您可以选择一个答案，或者添加您自己的答案，让我们知道什么对您有效，那将是非常棒的。谢谢是的，那个视频和