使用 Bootstrap 和 IE 修复垂直居中 div

Posted 2023-03-29

【中文标题】使用 Bootstrap 和 IE 修复垂直居中 div

【英文标题】：Vertically center div with Bootstrap and IE fix

【发布时间】：2015-08-13 18:21:49

【问题描述】：

目前，我正在使用这个在 Chrome、Firefox 和 safari 中运行良好的 html 和 CSS。

但是，它不甚至在 IE9 和 IE10 中工作（我们不尝试支持 IE8 或任何以前的版本）。

在 Internet Explorer 10 中，它看起来像这样。水平居中，但不垂直居中。

.login-page-container 
  min-height: 293px;
  min-height: 29.3rem;
  min-width: 328px;
  min-width: 32.8rem;
  background-color: red;


.vertical-center 
  min-height: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

.relative-position 
  position: relative;

<div class="vertical-center relative-position">
  <div class="login-page-container">
    <div class="page-header">
      <div class="login-header center-block">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <form action="/Account/Login" class="" method="post" role="form">
          <div class="login-form-container">
                <!-- elements -->
            <h1>Element </h1>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

因此，我们将不胜感激。提前谢谢。

【参考方案1】：

对于 IE9 和 IE10 放置 display:table 并设置属性 vallign="middle"

vallign 是旧浏览器和一些新浏览器支持的基本属性

【讨论】：

valign="center" 是 td 的属性。我认为它不适用于 div

当您将 display:table 用于父级并将 display:table 单元格用于子级时，您可以使用它

让我试一试。

应该是css属性vertical-align: middle;.. valign也没有值中心。它的“中间”

是的，它是中间的，当我开始使用这些类型的行为时，我使用 table 而不是 div 来实现跨浏览器兼容性。