页面中间的引导程序居中容器[重复]

Posted

技术标签:

【中文标题】页面中间的引导程序居中容器[重复]【英文标题】:Bootstrap centering container in the middle of the page [duplicate] 【发布时间】:2021-10-04 02:37:58 【问题描述】:

我是前端的新手,正在通过建立一个假电子商务网站来练习。我遇到了一些问题,但遇到了一个我不确定解决它们的最佳方法的问题。我希望我的表单位于页面中间。它之所以复杂是因为我遇到了一个问题,由于页面本身缺乏内容,我的视口太大,我的页脚下有一个巨大的空白。我解决这个问题的方法只是简单地将表单本身的视图高度设置为 85%,因此我不确定如何在页面上水平居中我的表单。解决此问题的最佳方法是什么?任何帮助是极大的赞赏!附上截图和代码

代码如下:

% extends 'base.html' %
% load static %

% block css_files  %
<link rel="stylesheet" href="% static 'login-out.css' %">
% endblock %

% block content %
<div class="container-fluid" id='loginout'>
  <div class="container-fluid text-center pt-3">
  % if next %
    % if user.is_authenticated %
      <p>Your account doesn't have access to this page. To proceed,
      please login with an account that has access.</p>
    % else %
      <p><strong> Please login to see this page.</strong></p>
    % endif %
  % endif %
    </div>
    
  <section id="form-test">
  <div class="container w-25 py-3" id='login-wrapper'>
    <form method="post" action="% url 'login' %">
        % csrf_token %
        <div class="form-group">
             form.username.label_tag 
             form.username 
             form.password.label_tag 
             form.password 
             form.non_field_errors 
        </div>
        <input class='btn btn-outline-primary' type="submit" value="Login" />
        <input type="hidden" name="next" value=" next " />
    </form>
    
    # Assumes setup the password_reset view in URLconf #
    <p><a href="% url 'password_reset' %">Lost password?</a></p>
  </div>
  </section>
</div>
% endblock %

和css

#loginout 
    background: #fef8f5;
    height: 85vh;


#container-text-center-pt-3 a 
    text-decoration: none !important;


#wrapper 
    background: #fef8f5;
    height: 100vh;


.form-control:focus 
    border-color: #d66534;
    box-shadow: 0 0 0 0.2rem rgb(230, 77, 11, 0.25);
 

#login-wrapper 
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);


【问题讨论】:

flex 可能有助于 align-self-center getbootstrap.com/docs/4.0/utilities/flex 谢谢回复,可惜不是哈哈。至少我刚刚尝试集成它的方式,它似乎没有帮助。但我肯定会犯错,我觉得我的问题源于我的表单占据了 85% 的视图高度,但我可能完全错了 【参考方案1】:

要将容器垂直居中,您必须将父级设置为最小高度 100vh 和高度 100%,然后您可以将 flex 添加到父级以使其居中。下面是一个例子:

HTML:

<div class="parent container d-flex justify-content-center align-items-center h-100">
  <div class="child"> <!-- Your code goes inside this div/form --> </div>
</div>

请注意,h-100 的意思是“高度:100%”,所以你应该使用一点 CSS 来解决它:

.parent 
  min-height: 100vh;

而且,友情提醒,“父母”就像“身体”。如果身体不是 100vh,您将无法居中。换句话说,如果“body”是 100vh,它的孩子应该是 100%。如果你的结构更像:

<body><div><div><div class="me"><form></form></div></div></div></body>

你的身体应该是“最小高度:100vh;高度:100%”,你所有的 div 应该是“高度:100%”。然后,您应该将 flex 类添加到表单的父级(具有“me”类的那个)。希望它可以帮助你。我鼓励你学习 CSS 盒子模型,它会帮助你理解一切。请避免使用“位置:绝对”技术。

在这里您可以了解更多关于盒子模型:https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

【讨论】:

啊,这真的很有趣,谢谢,但我不确定我是否按照您所说的正确。我试图将身体设置为,但我想我可能做错了什么。如果我删除表单的 85% 的 vh,我的页脚下会有一个巨大的空白。如果我按照您所说的正确,我添加了 min-height-100vh;和高度 100% 到身体的页脚下的空白是否应该消失或不消失? 玩 vh 和 vw 是危险的,因为如果你把它设置在错误的地方,整个页面可能会被搞砸。问题是一个元素的最大合法高度是它的父级的高度,所以,如果你有一个占据整个视口的主体,那么你有一个 div 只占用所需的空间,然后你有你的表单,那个表单赢了'不高于只占用所需空间的 div。您可以使用浏览器的检查器检查 div 的高度(通常是 ctrl+shift+i)。祝你好运:D 感谢您提供的所有有用信息!我确定问题在于更改表格 vh,从技术上讲,它是居中的,但是当我更改 vh 时,它看起来并没有居中,哈哈。我想我可能首先需要弄清楚为什么我的页脚下有这么多空白区域 正如我所说,如果你使用检查工具,你会很快发现问题,这里有一个firefox的链接:Examine and edit the box model。是的,正如你所说,这一切都是关于使用元素的高度 啊,是的,谢谢你的链接,我一定会阅读更多。抱歉,除了基础知识之外,我对前端相关的任何事情都有些白痴哈哈。感谢您的帮助!【参考方案2】:

使 div 水平和垂直居中的最简单方法是。

首先,取一个容器并为其设置 100% 或 100 的视口宽度和高度。 并添加 bootstrap flex 实用程序类。 它应该可以解决问题。

<div class="container h-100 d-flex justify-content-center align-items-center">
   <!-- your form container -->
   <div class="container w-25"></div>
</div>

Bootstrap 的 flex 实用程序类 https://getbootstrap.com/docs/4.4/utilities/flex/

【讨论】:

感谢您的回复!这确实有效,我的主要问题是我将它设置为 85vh 因为没有它我在页脚下有一个巨大的空白。从技术上讲,如果我删除了这个 vh,那么表单就会居中,但是没有 vh,由于页脚下的空白区域,它看起来很奇怪。我认为我的主要问题是表单本身的 vh,从技术上讲,浏览器认为它是中心,但由于表单的 vh 它不是。我希望这是有道理的!

以上是关于页面中间的引导程序居中容器[重复]的主要内容,如果未能解决你的问题,请参考以下文章

卡未在引导程序 4 中居中 [重复]

如何在引导程序中将井居中?

如何在引导程序 4 的容器中垂直和水平居中文本? [复制]

如何将第二列中的文本居中到页面 - 引导

使用引导程序使列居中 [重复]

引导文本和图像在中间对齐[重复]