固定位置的垂直对齐 div

Question

我在 bootstrap 列中有一个 div，它的 class 位置是固定的，因此里面的内容相对于视口是固定的。我可以水平对齐这些内容，但在垂直对齐时遇到问题。

我知道 bootstrap 4 中有很多方法，但由于固定位置 class，这一切似乎都无法解决。内容要么消失在页面外的某处，要么什么也没有发生。

<div class="container-fluid">
<div class="row">

<div class="col-md">
    <div class="container">
        <div class="row justify-content-md-center">

            <div class="position-fixed h-100 col-md-auto">
                <div class="text-center vertical-center">
                    <h2>Title</h2>
                    <p>Subtext</p>
                    <a data-toggle="modal" data-target="#Modal" href="#">Click me</a>
                </div>
            </div>

        </div>
    </div>
  </div>

</div>
</div

Answer 1

Apply Bootstrap 的 flexbox utilities to the parent of the div you're trying to center (this 是一个很好的备忘单，如果您需要它，可以了解不同的 flex 属性的作用：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
    
    <div class="col-md">
        <div class="container">
            <div class="row justify-content-md-center">
    
                <div class="position-fixed h-100 col-md-auto d-flex align-items-center">
                    <div class="text-center vertical-center">
                        <h2>Title</h2>
                        <p>Subtext</p>
                        <a data-toggle="modal" data-target="#Modal" href="#">Click me</a>
                    </div>
                </div>
    
            </div>
        </div>
      </div>
    
    </div>
    </div>

具体来说，添加 d-flex 和 align-items-center 应该可以。

Answer 2

如果你想让它固定位置，没有理由将它包含在其他元素中（container、row、col），因为正如你所说，它是定位是相对于视口的。因此，使用自定义 CSS 使其居中...

.vertical-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

https://www.codeply.com/go/rtOA3jgjPG

或，使用Bootstrap 类，使用d-flex使固定元素成为flexbox容器，然后align-items-center 到中心。

<div class="position-fixed h-100 col-md-auto d-flex align-items-center">
      <div>centered content</div>
<div>

https://www.codeply.com/go/TmySmKXXjC

Answer 3

#OuterDiv {
    position: fixed;
    width: 100%;
    height: 50px;
}

#InnerDiv {
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

固定位置的垂直对齐 div

Vertical alignment in a position-fixed div

css

fixed

vertical-alignment

twitter-bootstrap

bootstrap-4