将div居中并固定背景居中

Question

我正在尝试使div在背景固定且居中的页面上居中，但是它添加了水平和垂直滚动条，这些滚动条使div在整个页面上移动，同时保持背景静止。背景正是我想要的背景，但我需要将div居中并响应。

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;
}

相关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>

谢谢！

Answer 1

这里是一个片段，您可以根据自己的需要进行调整：

.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>