使用TypeScript实现Div内像素网格居中失败，寻求解决方法

你的代码里导致居中失败的核心原因是内层嵌套的<div className="flex justify-center items-center h-screen w-full">：

• h-screen会让这个div的高度等于整个浏览器视口高度，远超过父容器（h-96）的高度，破坏了父容器的flex居中布局逻辑
• 多余的嵌套层级也会干扰布局继承

修改方案 #

直接移除这个多余的内层div，让.pixel-one直接作为蓝色容器的子元素即可，因为蓝色容器已经设置了flex justify-center items-center，本身就具备居中子元素的能力：

return (
  <div>
    <h1 className="text-2xl font-bold mb-4 text-center p-4">myPixel</h1>
    <div className="w-full h-96 p-4 m-0 rounded-lg border border-black bg-blue-500 flex justify-center items-center">
      <div className="pixel-one"></div>
    </div>
  </div>
);

额外说明 #

如果你的.pixel-one是像素网格的容器（比如包含多个像素元素），只需给它设置合适的宽高，或者用flex/grid布局排列内部像素，它依然会被外层蓝色容器自动居中。比如网格场景：

// 假设像素网格是3x3布局
return (
  <div>
    <h1 className="text-2xl font-bold mb-4 text-center p-4">myPixel</h1>
    <div className="w-full h-96 p-4 m-0 rounded-lg border border-black bg-blue-500 flex justify-center items-center">
      <div className="pixel-grid grid grid-cols-3 gap-1">
        {Array(9).fill(0).map((_, idx) => (
          <div key={idx} className="w-8 h-8 bg-gray-300"></div>
        ))}
      </div>
    </div>
  </div>
);

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