Hero区块Div居中异常求助：搜索栏小屏显示问题

问题概述 #

• Hero区块内的Div（尤其是搜索栏）居中异常，小屏幕下显示效果差
• 该组件在其他区块可正常使用，仅带搜索栏的当前区块显示异常，怀疑存在CSS冲突

代码问题分析 #

1. JSX语法错误：className={hero-mid2}未用引号包裹，导致样式无法正确绑定，可能引发布局异常
2. 定位层级冲突：.hero-mid2 .hero-text设置的top:30%覆盖了全局.hero-text的垂直居中规则，导致内容偏移
3. 搜索栏无布局控制：.search容器未设置居中布局，input和按钮在小屏幕会挤压错位
4. 父容器缺失相对定位：.hero-mid2未设置position: relative，导致.hero-text的绝对定位基于整个文档而非父容器

修复方案 #

1. 修正JSX语法错误 #

return (
    <>
      <div className="hero-mid2">
        <img alt="HeroImg" src={props.heroImg} />
        <div className='hero-text'>
          <h1>{props.title}</h1>
          <p>{props.subHeading}</p>
          {props.showSearchBar && (
            <div className='search'>
              <input type="text" value={searchTerm} onChange={event => setSearchTerm(event.target.value)} className={props.searchBtnClass} placeholder={props.searchBarText} />
              <button onClick={handleSearchClick} className={props.searchBtnClass}>{props.searchBtnText}</button>
            </div>
          )}
          <a href={props.url} className={props.btnClass}> {props.buttonText} </a>
        </div>
      </div>
    </>
  );

2. 调整CSS解决居中与响应式问题 #

.hero-mid2{
    width: 100%;
    height: 50vh;
    background: black;
    position: relative; /* 新增：让子元素绝对定位基于父容器 */
}

/* 移除覆盖垂直居中的top:30%规则 */

.hero-text .search {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap; /* 小屏幕自动换行 */
}

.hero-mid2 .hero-text input{
    padding: 0.8rem;
    border-radius: 5px;
    width: 18rem;
    font-size: 1rem;
    max-width: 80%; /* 小屏幕限制最大宽度 */
}

.hero-mid2 img{
    filter: blur(5px);
    -webkit-filter: blur(5px);
    opacity: 0.8;
}

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center; /* 文本及内部元素水平居中 */
    width: 90%; /* 小屏幕适配宽度 */
}

.hero-text h1{
    font-size:3rem;
    font-weight: 800;
    background-color: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    @media (max-width: 768px) {
        font-size: 2rem; /* 小屏幕缩小标题字体 */
    }
}

.hero-text p{
    padding: 0.5rem 0 2rem 0;
    font-size: 1.1rem;
    font-weight: 500;
    @media (max-width: 768px) {
        font-size: 1rem; /* 小屏幕缩小正文字体 */
    }
}

.hero-text button{
    padding: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    width: 6rem;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: rgb(42, 95, 243);
    color: white;
}

修复说明 #

• 修正className语法错误，确保样式正确绑定
• 给父容器添加相对定位，让子元素的绝对定位基于父容器，避免全局偏移
• 恢复垂直居中规则，移除冲突的top值设置
• 给搜索栏容器添加flex布局，实现元素居中及小屏幕自动换行
• 添加媒体查询，适配小屏幕字体大小，避免内容溢出
• 用flex gap替代margin控制元素间距，提升布局稳定性

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