如何使col-md-6中的巨无霸置于两侧的中央？

Question

Here's my page:

The problem is, my Jumbotron placed on the upper side of the page. I want to move it to the center (a little down below). I tried overriding margin and padding but it still didn't work. How would I do that?

Here's my 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>

And here's my 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;
}

Answer 1

Try using:

.jumbotron {
background-color: transparent;
color: white;
margin: auto;
width: 90%;

}

Maybe this article can help you: W3CSchools | CSS Margin