垂直于背景中间放置2个嵌入式列

Question

您可以手动帮助我使用UIkit或CSS！ 我正在使用UIkit框架，问题是我真的不明白如何在背景中间（垂直）放置两个内联列！ 这是我的屏幕快照，我想您就会理解我的问题] 1

这是此部分带有列的代码：

<section id="header" class="gradient bg bg-gradient ">

    <div uk-grid style="margin: 0 auto;" class="uk-flex uk-flex-middle uk-flex-space-between uk-grid-item-match">
        <div class="uk-width-3-5@m">
            <div class="uk-flex-inline">
                <hr class="uk-divider-small">
                <p>DISTRIBUTED LEDGER TECHNOLOGY</p>
            </div>
            <p>
            <h1><span style="color: #6d6d6d">BRINGING</span> <span style="color: white">A GOLD STANDART TO THE</span>
                <span style="color: rgba(4,149,247,1);">BLOCKCHAIN</span></h1></p>

        </div>
        <div class="uk-width-expand@m uk-flex">
            <video loop muted playsinline uk-video="autoplay: inview">
                <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
                <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
            </video>
        </div>
    </div>

</section>

这是我的main.css

.gradient {
    height: 900px;
    width: 100%;
    background: linear-gradient(180deg, #092436 0%, rgba(13, 17, 22, 0) 100%);
    box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}

.bg {
    height: 900px;
    width: 100%;
    background-color: #0D1116;
    box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}

.bg-gradient{
    position:absolute;
    top:0px;
    z-index: -1;
}

.thin-text{
    font-weight: 200;
}

html,body{
    letter-spacing: 2px;
}

.uk-button-text {
    letter-spacing: 2px;
    padding:5px;
}

.uk-navbar{
    border-bottom: 1px solid rgba(4,149,247,0.1);
}

.hover{
    transition: 0.3s;
}

.hover:hover{
    background-color: rgba(4,149,247,0.1);
}

.padding-header {
    padding: 200px 100px 100px 100px;
}

我的2列位于.bg和.gradient内！

Answer 1

您可以使用以下解决方案在背景中间垂直放置两个嵌入式列：

.uk-width-expand@m {
    margin: 0 auto;
}

Answer 2

<section id="header" class="gradient bg bg-gradient uk-flex">
    <div class="uk-margin-auto uk-margin-auto-vertical">
        <div uk-grid>
        </div>
    </div>
</section>