javascript - 无法在每个屏幕中将内容部分居中以实现全屏无滚动网站

Question

我一直在努力使自定义网站具有响应能力。这是一个全屏无滚动网站。我一直在尝试在每种屏幕尺寸上将内容部分居中，并将页 footer 分置于侧边栏底部。我的意思是，无论访问网站的屏幕大小如何，我都希望内容位于中心，语言下拉菜单和版权始终位于底部。我尝试使用不同的媒体查询来做到这一点，但随后又出现了具有不同高度和屏幕的不同屏幕破坏了它。请查看此网站 www.matininternational.com。这是 fiddle :https://jsfiddle.net/zakero/x9got1br/3/

.content {
    position: absolute;
    right: 100px;
    top: 130px;
    width: 660px;
    z-index: 9999;
    -webkit-font-smoothing: antialiased;
}


.background-overlay{
    background: rgba(0, 0, 0, 0.9);
    height: 450px;
    border-radius: 10px;
    margin: 0 100px 0 0;
}

请注意，我没有使用任何 css 框架来进行设计。这是我自己的概念。

Answer 1

我已经使用 flexbox 像这样对中心部分的内容进行了算法处理:

section-name{
display:flex;
justify Content: center;
align item:center;
width:100%;
height :400px;
}

https://scrimba.com/g/gflexbox