本地正常的React卡片部署Firebase后无法居中问题求助

localhost环境下React卡片可正常居中，但部署到Firebase Hosting后始终靠左。已尝试设置margin:'auto'、添加align='center'属性，问题未解决。

React代码 #

//Code of card in ReactJS
<div style={{margin:'auto'}} align='center' className="container5">
      {data.map((card, index) => (
        <div style={{margin:'auto'}} align='center'  className={`card`} data-state={activeSections[index]} key={card.id}>
          <div className="card-header">
            <div
              style={{
                backgroundImage: `url('${card.imageUrl}')`,
              }}
              className="card-cover"
            ></div>
            <h1 className="card-fullname">{card.name}</h1>
            <h2 className="card-jobtitle">{card.jobTitle}</h2>
          </div>
          <div className="card-main">
            <div
              className={`card-section ${activeSections[index] === '#about' ? 'is-active' : ''}`}
              id="about"
            >
              <div className="card-content">
                <div className="card-subtitle">Description</div>
                <div className="card-desc-container">
                  <p className="card-desc">
                    {card.about}
                  </p>
                </div>
              </div>
            </div>
            <div
              className={`card-section ${activeSections[index] === '#experience' ? 'is-active' : ''}`}
              id="experience"
            >
              <div className="card-content">
                <div className="card-subtitle">Tech Stack</div>
                <div className="card-tech-stack">
                  {card.techStackData.map((tech, techIndex) => (
                    <div
                      key={techIndex}
                      className={`card-tech-item ${activeSections[index] === '#experience' ? 'is-active' : ''}`}
                      onClick={() => handleButtonClick(index, '#experience')}
                    >
                      {tech}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div
              className={`card-section ${activeSections[index] === '#contact' ? 'is-active' : ''}`}
              id="contact"
            >
              <div className="card-content">
                <div className="card-subtitle">CONTACT</div>
                <div className="card-contact-wrapper">
                  <div className="card-contact">
                    {card.liveLink && (
                      <a
                        href={card.liveLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="live-button"
                      >
                        Live
                      </a>
                    )}
                    {card.liveLink && card.githubLink && <span className="button-separator"></span>}
                    {card.githubLink && (
                      <a
                        href={card.githubLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="github-button"
                      >
                        Github
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <div className="card-buttons">
              <button
                onClick={() => handleButtonClick(index, '#about')}
                className={activeSections[index] === '#about' ? 'is-active' : ''}
                data-section="#about"
              >
                ABOUT
              </button>
              <button
                onClick={() => handleButtonClick(index, '#experience')}
                className={activeSections[index] === '#experience' ? 'is-active' : ''}
                data-section="#experience"
              >
                Tech Stack
              </button>
              <button
                onClick={() => handleButtonClick(index, '#contact')}
                className={activeSections[index] === '#contact' ? 'is-active' : ''}
                data-section="#contact"
              >
                Link
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>

CSS代码 #

//CSS 
.card {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #ffffff 0%, #f0f4fd 100%);
  overflow: hidden; /* Add overflow hidden for rounded corners */
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
}

解决方案 #

1. 修复父容器.container5的样式 #

卡片居中失效的核心原因是父容器container5缺少正确的布局规则，导致卡片的margin:auto无法生效。给.container5添加以下CSS：

.container5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

或使用Grid布局：

.container5 {
  width: 100%;
  display: grid;
  place-items: center;
}

2. 移除冗余属性 #

删除React元素上的align='center'属性，这是HTML过时属性，CSS布局的优先级更高且更可靠。同时可移除卡片上重复的style={{margin:'auto'}}，父容器的flex布局已能实现居中。

3. 清除部署缓存 #

Firebase Hosting可能缓存旧CSS文件，强制刷新浏览器（Ctrl+Shift+R）加载最新样式，确保修改后的CSS生效。

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