如何使巨型加速器在col md-6中放置在正中两侧？

Question

这是我的页面：

​

问题是，我的Jumbotron放在页面的上方。我想把它移到中间(下面稍微低一点)。我尝试了覆盖空白处和填充，但它仍然不起作用。我该怎么做呢？

这是我的HTML

<div class="col-md-6">
    <div class="welcome-page-eat">
        <div class="jumbotron">
            <h2>
                Hello, world!
            </h2>
            <p>
                This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
            </p>
            <p>
                <a class="btn btn-primary btn-large" href="#">Learn more</a>
            </p>
        </div>
    </div>
</div>

下面是我的CSS：

.welcome-page-eat {
    background: url(../images/front_page/eat.jpg) no-repeat right 0;
    margin-right: -15px;
    margin-left: -15px;
    padding-bottom: 62.5%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.welcome-page-cook {
    background: url(../images/front_page/cook.jpg) no-repeat right 0;
    margin-right: -15px;
    margin-left: -15px;
    padding-bottom: 62.5%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.jumbotron {
    background-color: transparent;
    color: white;
}