Question

我在引导程序列中有一个div，该div具有位置固定的类，因此其中的内容相对于视口是固定的。我可以水平对齐这些内容，但无法垂直对齐。

我知道引导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

Answer 1

将Bootstrap的flexbox utilities应用于您要居中的div的父级（this是一个很好的备忘单，其中列出了您需要的不同flex属性的作用）：

{
  "Prefix": "",
  "FirstName": "test-resume-dlyon",
  "LastName": "test-dlyon-resume",
  "AddressLine1": "test2",
  "AddressLine2": "",
  "City": "Invalid Zipcode",
  "State": "GA",
  "Zip": "99999",
  "Phone": "9999999999",
  "Email": "testresumedlyon@gmail.com",
  "Source": "V",
  "WritingNumber": "",
  "AgeVerified": true,
  "AdditionalSource": "",
  "EnableInternetSource": true,
  "InternetSource": "",
  "ExternalResult": "",
  "PartnerID": "",
  "SubscriberID": "15584",
  "Languages": [
    "English",
    "Spanish"
  ],
  "fileName": "resume",
  "fileExtension": "docx",
  "fileData": "UELDMxE76DDKlagmIF5caEVHmJYFv2qF6DpmMSkVPxVdtJxgRYV"
}

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

Answer 2

If you want it to be fixed position, there's no reason to contain it inside the other elements (container, row, col) since as you said, it's positioning is relative to the viewport. Therefore, use custom CSS to center it...

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

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

发出的请求

或，要使用Bootstrap类，请使用d-flex，然后将align-items-center居中，将固定元素设置为flexbox容器。

<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中的垂直对齐

3 个答案: