Вертикальное выравнивание в позиции с фиксированным положением

Question

У меня есть 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

Если вы хотите, чтобы он был фиксированной позицией, нет смысла содержать его внутри других элементов (container, row, col), поскольку, как вы сказали, его расположение относительно области просмотра.Поэтому используйте собственный CSS для центрирования ...

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

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

---

Или , чтобы использовать классы Bootstrap, сделать фиксированный элементконтейнер flexbox, используя d-flex, а затем 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 2

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

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

Answer 3

Примените утилиты Bootstrap flexbox к родительскому элементу 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 должно работать.