如何在非移动端视图下始终将成员容器居中显示？

我制作了适配手机等设备的响应式成员页面，但不清楚如何在非移动端视图下始终让members-container处于页面中间（而非固定在顶部）。尝试过一些方法但未解决，以下是我的代码：

HTML代码 #

<div class="members-container">
    <div class="members-header">
        <h1>Our Members</h1>
    </div>
    <div class="sub-container">
        <div class="teams">
            <img src="assets/imgs/tcsmasked.jpg" alt="">
            <div class="members-name"><a href="https://www.tcsmasked.maskednet.org">TCSMasked</a></div>
            <div class="members-label">Founder</div>
            <div class="social-links">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-github"></i></a>
            </div>
        </div>
        <div class="teams">
            <img src="assets/imgs/pieandstuff.png" alt="">
            <div class="members-name"><a href="https://www.pie.maskednet.org">Pie and Stuff</a></div>
            <div class="members-label">Owner</div>
            <div class="social-links">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-github"></i></a>
            </div>
        </div>
    </div>
</div>

原CSS代码 #

.members-container {
    text-align: center;
}
.members-header {
    color: #ffffff;
    font-size: 20px;
}
.members-header h1 {
    font-family: 'Orbitron', sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sub-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.teams {
    text-align: center;
    margin: 15px;
    padding: 15px;
    transition: 0.4s;
    box-sizing: border-box;
    background: #fff;
    border-radius: 15px;
    margin-top: 4rem;
    display: grid;
}
.teams img {
    display: flex;
    width: 220px;
    border-radius: 10px;
    height: 220px;
}
.members-name {
    margin-top: -5px;
    padding: 12px;
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.members-name a {
    text-decoration: none;
    color: #000;
    transition: all .5s ease;
}
.members-name a:hover {
    color: #5c5c5c;
}
.members-label {
    margin-top: -15px;
    font-style: italic;
    color: #888;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.social-links {
    margin-top: 15px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.social-links a {
    display: inline-block;
    font-size: 25px;
    height: 30px;
    width: 30px;
    transition: .4s;
}
.social-links a:hover {
    transform: scale(1.2);
}
.social-links a i {
    color: #000000;
}
@media screen and (max-width: 823px) {
    .teams {
        max-width: 100%;
    }
}
@media screen and (max-width: 530px) {
    body {
        overflow: scroll
    }
}

解决方案 #

要实现非移动端下members-container垂直居中，核心是让父容器占满视口高度，再通过布局属性将子容器居中。这里提供两种可靠方法：

方法1：Flex布局（推荐） #

修改body和members-container的样式，利用flex实现全局居中，同时兼顾移动端适配：

/* 新增/修改body样式 */
body {
  margin: 0;
  min-height: 100vh; /* 让body占满视口高度 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

/* 修改members-container样式 */
.members-container {
  text-align: center;
  max-width: 1200px; /* 限制最大宽度，避免大屏内容过宽 */
  width: 100%;
  padding: 0 20px; /* 左右留白，防止贴边 */
}

/* 调整移动端媒体查询，取消垂直居中 */
@media screen and (max-width: 530px) {
  body {
      overflow: scroll;
      justify-content: flex-start; /* 移动端内容从顶部开始 */
      padding-top: 20px; /* 顶部留白 */
  }
}

方法2：绝对定位（兼容性更好） #

如果需要兼容旧浏览器，可以用绝对定位+transform实现居中：

/* 给html和body设置基础定位 */
html, body {
  margin: 0;
  min-height: 100vh;
  position: relative; /* 作为绝对定位的参考 */
}

/* 修改members-container样式 */
.members-container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身居中 */
  max-width: 1200px;
  width: 100%;
  padding: 0 20px;
}

/* 同样调整移动端适配 */
@media screen and (max-width: 530px) {
  .members-container {
      position: static; /* 取消绝对定位 */
      padding-top: 20px;
  }
  body {
      overflow: scroll;
  }
}

两种方法都能保证非移动端下容器垂直水平居中，移动端则恢复从上到下的布局，避免内容截断。

内容的提问来源于stack exchange，提问作者TCSMasked