了解div居中如何与bootstrap 4一起使用

时间：2019-05-24 15:33:56

标签： css bootstrap-4

我遇到了一些代码，它们很好地使登录框居中。但是后来我意识到我实际上希望我的登录框是左侧的25％，而不是50％。但是我不知道代码实际上是如何工作的。当我用google居中元素时，建议左移：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并不能使其居中。

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

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

6 个答案:

答案 0 :(得分：1)

以您提到的内容为中心进行的讨论是一个小难题，请允许我解释一下。
首先，您的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约束。这意味着它与上面的代码段相同，但是您只是更改了宽度 

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

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

什么是垂直高度单位？

此单位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

当在CSS中居中时，

Flexbox是最佳方法。只要确保您的父div和子div处于所需的高度，然后使用align-items: center 

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

html,
body {
  height: 100%;
}
<div class="Absolute-Center is-Responsive">hello</div>

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

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

html,
body {
  height: 100%;
}
<div class="Absolute-Center is-Responsive">hello</div>

答案 1 :(得分：1)

Bootstap3和Bootstrap4之间的主要，核心区别是将基本网格系统从使用Floats进行对齐更改为使用Flexbox。

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

Flexbox需要做两件事：

  1. 父容器（例如DIV，剖面，侧面，p等）

  2. 一个或多个子元素（例如div，p，img等）

您在父级上打开弹性框 ：display:flex;

然后，有各种开关（仅少数）。有些设置在父项上（例如justify-content），而有些设置在项上（例如flex-grow:1）

由于您想了解如何正确管理此问题，建议您花20分钟的时间查看以下出色的，快节奏的flexbox教程：

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

Here is a great cheatsheet for Flexbox。

观看该教程，从现在开始的30分钟内，您的问题将得到解决-并且您将了解flexbox。

P.S。我与该视频或其演示者没有任何联系-很幸运，我发现了它，现在将其传递了。

答案 2 :(得分：0)

div正确居中，但其内部内容未居中。因此，您需要使用display: flex来分配绝对div的内容。

我在这里https://jsfiddle.net/aedo3pv5

更新了小提琴

答案 3 :(得分：0)

在引导程序中非常简单：

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

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

  • offset：元素的左侧空间，在这种情况下3表示列数，因为网格系统由12列组成，所以3等于25％。

您可能还想看看bootstrap grid system。

答案 4 :(得分：0)

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

解释

答案 5 :(得分：0)

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

相关问题
最新问题