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>
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!!
flexbox isn’t working unfortunately.
I do like flexbox but unfortunately it is not working here. still giving the two scrolls