Next.js中使用Tailwind CSS居中模态框（Div）失败求助

你的模态框出现超出屏幕的问题，核心原因是容器样式存在拼写错误、缺少全屏定位逻辑和合理的高度限制，以下是具体修复方案：

原代码的核心问题 #

• modal类缺少全屏覆盖的定位样式，且包含无效的vertical-align-center（Tailwind无此类）
• wrapper类存在拼写错误：mx-autoflex应为mx-auto flex，且h-full会让容器高度无限制，未设置最大高度导致内容超出视口
• 未给模态框添加背景遮罩层，无法确保模态框在视口内居中且隔离页面其他交互

修改后的完整代码 #

const styles = {
  modal: `fixed inset-0 bg-black/50 flex justify-center items-center z-50`,
  wrapper: `grid grid-cols-1 gap-4 rounded-xl bg-gray-50 max-w-sm w-full max-h-[90vh] overflow-y-auto p-[1rem] m-auto font-mediumSerif`,
  title: `my-6 font-bold text-3xl text-center`,
  smallField: `w-full flex justify-between gap-[1rem] mb-4`,
  fieldTitle: `flex-1 text-end self-center`,
  inputContainer: `flex-[5] border-2 border-[#787878] p-2`,
  inputField: `w-full border-0 outline-none bg-transparent`
}

const PostModal = () => {
  return (
    <div className={styles.modal}>
      <div className={styles.wrapper}>
        <div className={styles.title}>Create a New Post</div>
        <div className={styles.smallField}>
          <span className={styles.fieldTitle}>Title</span>
          <span className={styles.inputContainer}>
            <input className={styles.inputField} type='text' />
          </span>       
        </div>
        <div className={styles.smallField}>
          <span className={styles.fieldTitle}>Brief</span>
          <span className={styles.inputContainer}>
            <input className={styles.inputField} type='text' />
          </span>     
        </div>
        <div className={styles.smallField}>
          <span className={styles.fieldTitle}>Banner Image Url</span>
          <span className={styles.inputContainer}>
            <input className={styles.inputField} type='text' />
          </span>       
        </div>
        <div className={styles.smallField}>
          <span className={styles.fieldTitle}>Category</span>
          <span className={styles.inputContainer}>
            <input className={styles.inputField} type='text' />
          </span>     
        </div>
        <div className={styles.smallField}>
          <span className={styles.fieldTitle}>Estimated Read Length (in minutes)</span>
          <span className={styles.inputContainer}>
            <input className={styles.inputField} type='text' />
          </span>       
        </div>
        <div className={styles.smallField}>
          <span className={styles.fieldTitle}>Article Text</span>
          <span className={styles.inputContainer}>
            <textarea className={styles.inputField} rows={12} />
          </span>     
        </div>
      </div>
    </div>
  )
}
export default PostModal;

关键修改说明 #

1. modal容器：

   • fixed inset-0：固定定位，覆盖整个视口
   • bg-black/50：添加半透明黑色背景，实现遮罩隔离效果
   • flex justify-center items-center：确保内部表单容器在视口水平+垂直居中
   • z-50：设置高层级，避免被页面其他元素遮挡

2. wrapper容器：

   • 修正mx-autoflex的拼写错误，添加w-full确保容器宽度自适应
   • max-h-[90vh]：限制容器最大高度为视口的90%，避免超出屏幕范围
   • overflow-y-auto：当表单内容高度超出容器时，仅显示纵向滚动条
   • 移除冗余的flex-col布局类，保留grid布局即可满足排版需求

3. 细节优化：

   • 给fieldTitle添加self-center，确保标签与输入框垂直对齐
   • 给inputContainer添加p-2，增加输入框内边距，提升交互体验
   • 调整title的上下边距为my-6，减少顶部空白避免内容上移

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