Flexbox布局问题：如何将元素移出文档流并居中于屏幕

没问题，我来帮你搞定这个Flexbox布局的需求，咱们一步步拆解实现：

首先，先把你提供的HTML结构补全（补充了缺失的灰色联系框部分）：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id='container-row'>
    <section class='container-column pic-bkg' style="background-color: blue;">
      <nav id='main-nav'>
        <ul id='main-nav-list'>
          <li>Home</li>
          <li>Link</li>
          <li>Link</li>
        </ul>
      </nav>
    </section>
    <section class='container-column pic-bkg' style="background-color: green;">
      <!-- 第二列内容区域 -->
    </section>
  </div>
  <!-- 灰色联系框 -->
  <div class="contact-box" style="background-color: gray;">
    <p>Contact Us</p>
    <!-- 联系信息内容 -->
  </div>
</body>
</html>

接下来是核心CSS代码，每部分都加了注释说明：

/* 重置默认样式，消除浏览器自带的margin/padding，避免布局错位 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让html和body撑满整个屏幕，同时给body设置相对定位，作为联系框绝对定位的参照 */
html, body {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 把容器行设置为Flex布局，让子列自动并排 */
#container-row {
  display: flex;
  width: 100%;
  height: 100%; /* 让行撑满页面高度 */
}

/* 给两个列设置flex:1，实现各占50%宽度并撑满屏幕 */
.container-column {
  flex: 1;
  /* 若需要列内内容也做Flex布局，可在此添加display:flex等属性 */
}

/* 处理灰色联系框：脱离文档流并居中显示在页面中央 */
.contact-box {
  position: absolute; /* 脱离原文档流，不影响两列布局 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过位移实现真正的居中 */
  width: 320px; /* 可根据需求调整宽度 */
  height: 220px; /* 可根据需求调整高度 */
  padding: 20px; /* 内边距让内容不贴边 */
  border-radius: 8px; /* 可选：添加圆角优化视觉 */
  box-shadow: 0 0 12px rgba(0,0,0,0.15); /* 可选：添加阴影增强层次感 */
}

关键知识点说明： #

• flex:1：给两个列设置该属性后，它们会自动平分父容器的可用空间，完美实现各占50%宽度且撑满屏幕的需求。
• position:absolute + transform：这是脱离文档流并居中元素的经典方案，既不会干扰原有两列的布局，又能让联系框稳定停在页面最上层的中央位置。
• box-sizing:border-box：确保元素的内边距和边框不会额外增加宽度，避免布局出现意料之外的错位。

这样设置后，蓝色和绿色列会完全撑满屏幕各占一半，灰色联系框则会脱离原本的文档位置，居中显示在页面中央。

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