了解如何使用 bootstrap 4 使 div 居中答案

【问题标题】：Understanding how centering a div works with bootstrap 4了解如何使用 bootstrap 4 使 div 居中
【发布时间】：2019-05-25 01:36:33
【问题描述】：

我遇到了一些代码，它很好地居中了我使用的登录框。但后来我意识到我实际上希望我的登录框位于左侧的 25% 而不是 50%。但是我不知道代码实际上是如何工作的。当我用谷歌搜索居中元素时，它建议将 left: 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>

Fiddle located here

似乎没有引导 css 它并不能完全正确地居中。

我的目标只是能够在任何地方将其“居中”，以便在调整页面大小时它始终保持在我指定的相同百分比位置。

有人可以解释一下这是如何工作的，以便我自己理解吗？或者，如果这实际上是一种奇怪的方法，也许可以澄清一下。谢谢。

【问题讨论】：

嘿 NP - 只是跟进。我们有没有回答你的问题？如果还有更多我们可以提供帮助的信息，请添加评论或编辑您的问题以告知我们。否则，如果您可以选择一个答案，或者添加您自己的答案并让我们知道什么对您有用，那就太好了。 谢谢！
是的，那个视频和解释让我走的很好，谢谢。

标签： css bootstrap-4

【解决方案1】：

Bootstap3 和 Bootstrap4 的主要核心区别在于将基本的网格系统从使用浮点数对齐改为使用 Flexbox。

因此，理解 flexbox 很重要，即使在 Bootstrap 之外也很有用。而且，幸运的是，这也很容易。

Flexbox 需要两件事：

父容器（例如 DIV、section、aside、p 等）
一个或多个子元素（例如 div、p、img 等）

您在父级上打开 flexbox：display:flex;

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

既然你想了解如何正确地管理它，我建议你花 20 分钟的时间来查看以下优秀的快节奏 flexbox 教程：

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet 用于 Flexbox。

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

_{附注我与视频或其演示者没有任何联系 - 我很幸运发现了它，现在将它传递出去。}

【讨论】：

谢谢我下班回家看教程！
天哪，那个视频太棒了，我希望我在 2 年前就看到了！
这正是我的感受。某处常春藤盟校缺少最好的导师。 而且，希望了解 flexbox 及其功能可以帮助您解决这个和未来的对齐问题。

【解决方案2】：

您提到的以 Div 为中心是一个有点棘手，让我解释一下。
首先，您的 div 是绝对的，并且从各个方向延伸。这导致了这一点。

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

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

注意，这涵盖了整个页面。因为位置从所有4个边都是0
现在只需添加 max-width 和 max-height 约束。这意味着它与上面的 sn-p 相同，但您只是更改了宽度

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

.Absolute-Center.is-Responsive {
  min-width: 200px;
  max-width: 200px;
}

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

现在，发生了什么？宽度是一个约束。接下来，您所做的是指定高度。请注意，顶部、底部和其他位置会导致这个短 div 进入中心和繁荣，它在中心

.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>

div基本被拉伸了。

使用绝对定位居中的最佳方法是什么？

使用这个

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

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

现在，这有什么更好的？您可以根据自己的喜好编辑顶部、左侧、右侧的值，以实现响应式视图。我所做的只是将顶部的值设置为百分之一。对于缩放它们的许多视图，它将保持修复。您可以校准视图并为您实现最佳效果。

什么是垂直高度单位？

这个单位vh被添加到显示器中，根据屏幕的高度而不是宽度进行缩放。试试这个例子，注意当你编辑浏览器的高度时文本是如何变化的。使用vw 作为宽度。

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

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

红利居中方式：Flexbox

Flexbox 是在 CSS 中使项目居中的最佳方法。只需确保您的 父 div 和子 div 处于所需高度并使用align-items: center

.Absolute-Center {
  display: flex;
  align-items: center;
  height: 100%;
}

html,
body {
  height: 100%;
}

&lt;div class="Absolute-Center is-Responsive"&gt;hello&lt;/div&gt;

要水平居中，只需添加justify-content: center

.Absolute-Center {
  display: flex;
  align-items: center;
  justify-content:center;
  height: 100%;
}

html,
body {
  height: 100%;
}

&lt;div class="Absolute-Center is-Responsive"&gt;hello&lt;/div&gt;

【讨论】：

感谢您提供如此全面的答案。我输入了一个很大的回复，并在这样做时了解我的困惑。我没想到会设置一个宽度来使其居中，我认为它会将其倾倒在左侧。我想它很聪明，如果你想要它在所有角落里 0 0 0 0 ，它可以用最大宽度做的最接近的就是它的中心。我不确定你为什么使用前 40%。不是以 0 为中心吗？
我已将top:40% 用于另一项。因此，您可以根据自己的喜好进行调整。正如您在问题中提到的那样，您需要类似的东西。还添加了一个奖金居中方法。 :) @NibblyPig
如果我说的是对的，top:40% 不会意味着它位于屏幕下方的 70% 处？因为屏幕向下的 40% 意味着您还剩下 60%，所以除以 2... 并且设置最小/最大高度似乎没有任何作用...
@NibblyPig 请注意该示例中的 CSS 设置。我删除了所有内容，只添加了您的位置，top:40% 表示它将始终从顶部定位 40%。当屏幕调整大小时，它仍然是从顶部开始的 40%，因为总数减少了。如果我不清楚developer.mozilla.org/en-US/docs/Web/CSS/top，请尝试文档
我明白了，所以不考虑物品的高度？

【解决方案3】：

div 正确居中，但里面的内容没有居中。所以，你需要使用display: flex来分配绝对div的内容。

我在这里更新了小提琴https://jsfiddle.net/aedo3pv5

【讨论】：

【解决方案4】：

在引导中很容易：

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

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

offset：元素的左边距，这里的3指的是列数，因为网格系统是由12列组成的，所以3等于25%。

您可能还想看看bootstrap grid system。

【讨论】：

但它不会正好是 25%，具体取决于内容的宽度，这就是为什么使用 absolute 以及我认为的其他一些诡计
偏移量不依赖于元素的宽度，它给左边 3 列空间，所以如果 box 是 body 的子元素，它将从左边有 25% 的空间。 Bootstrap 有一个非常可靠且经过测试的网格系统

【解决方案5】：

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  transform :translate(-50%,-50%);
}

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

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

这里解释Transform: translate(-50%, -50%)

【讨论】：

【解决方案6】：

在 Bootstrap 4 中，您需要连续添加两个简单的类。你需要使用位置

.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;
  background: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row justify-content-center align-items-center" style="height: 100vh;">
        <div class="Absolute-Center is-Responsive" style="text-align: center">
            hello
        </div>
    </div>
</div>

【讨论】：