Solution 1 :

Here is a snippet which you can then adapt to your needs:

.outer {
    width: 500px;
    height: 300px;
    background-color: blue;
    /* these 3 lines below do the magic */
    display: flex;
	align-items: center;
	justify-content: center;
}

.inner {
    width: 80px;
    height: 100px;
    background-color: red;
}
<div class="outer">
    <div class="inner">
    </div>
</div>

Problem :

I am trying to get a div to center on a page with a background that is fixed and centered, but it adds horizontal and vertical scroll bars which move the div all over the page while keeping the background still. The background is exactly how I want it but I need the div to be centered and responsive.

CSS:

.landingImg{
    margin-top: -35px;
    margin-right: -50px;
    background: url("https://i.imgur.com/VW2izVa.png");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    min-height: 800px;

    min-width: 1560px;
    display: flex;
}
.jumbo{
    justify-content: center;
    margin:auto;
    margin-top:10%;
    /* padding: 20px; */
    width: 475px;
    max-width: 475px;
    background:url("https://i.imgur.com/0XoMcjD.png");
    background-size: 100% 100%;


}

.jumboContain{
    padding: 30px;
    text-align: center;
}
.call2Action{
    font-weight: bold;
    font-size: 20px;
}
.playBtn {
    margin: auto;
    background: #5a3c1c;
    border: none;
    width: 300px;
}

Relevant HTML:

 <div className="jumbo">
                    <div className="jumboContain">
                        <h1 className="display-4">KnightFall</h1>
                        <p className="lead">In a world where evil is left to thrive, a hero is needed to bring balance to the force! </p>
                        <hr className="my-4"></hr>
                        <p className="call2Action">Will you be that hero?</p>
                        <a className="playBtn btn btn-primary btn-lg btn-block" href="/signup" role="button">Play Now</a>
                    </div>
                </div>
            </div>

Thank you!!

Comments

Comment posted by Johannes

A detail: Using

Comment posted by Johannes

Apart from that, the

Comment posted by AylaWinters

flexbox isn’t working unfortunately.

Comment posted by AylaWinters

I do like flexbox but unfortunately it is not working here. still giving the two scrolls