React中如何将Interface组件居中叠加在App组件上并导出？

这里给你一个直接可用的实现方式，完全符合你的需求：

import App from './App';
import Interface from './Interface';

export default function foo() {
  return (
    <div style={{ position: 'relative', minHeight: '100vh' }}>
      {/* 渲染App组件作为底层 */}
      <App />
      {/* 居中渲染Interface组件在App之上 */}
      <Interface 
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 10
        }}
      />
    </div>
  );
}

关键部分解释： #

• 外层容器的position: relative：让内部的Interface组件的绝对定位以这个容器为参考，而不是整个页面
• minHeight: '100vh'：确保容器至少占满整个浏览器视口高度，避免App组件高度不足时居中位置偏移
• Interface的样式：
  • position: absolute：让组件脱离常规文档流，覆盖在App之上
  • top: 50% + left: 50%：把组件的左上角定位到容器的中心位置
  • transform: translate(-50%, -50%)：把组件自身向左、向上平移自身宽高的50%，实现真正的中心对齐（这是React/HTML里最通用的居中方案，适配任意元素大小）
  • zIndex: 10：确保Interface组件的层级比App更高，保证它显示在最上层

新手友好替代方案（用CSS类管理样式） #

如果觉得内联样式写起来麻烦，也可以单独用CSS文件管理：

/* Foo.css */
.container {
  position: relative;
  min-height: 100vh;
}

.centered-interface {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

然后在组件中引入使用：

import './Foo.css';
import App from './App';
import Interface from './Interface';

export default function foo() {
  return (
    <div className="container">
      <App />
      <Interface className="centered-interface" />
    </div>
  );
}

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