固定位置 div 中的垂直对齐

Posted 2023-03-05

【中文标题】固定位置 div 中的垂直对齐

【英文标题】：Vertical alignment in a position-fixed div

【发布时间】：2019-05-12 17:16:15

【问题描述】：

我在引导列内有一个 div，它的类位置是固定的，因此里面的内容相对于视口是固定的。我能够水平对齐这些内容，但我无法垂直对齐它。

我知道 bootstrap 4 中有很多方法，但由于位置固定类，这一切似乎都中断了。内容要么消失在页面外的某个地方，要么什么都没有发生。

<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

【问题讨论】：

我会放弃你的固定位置和垂直中心并将align-items-center 添加到你的行中并完成它。

需要固定位置。我需要修复内容

【参考方案1】：

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


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

【参考方案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

【参考方案3】：

将 Bootstrap 的 flexbox utilities 应用于您要居中的 div 的父级（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 应该可以工作。