网格项目未居中

Question

我正在构建一个具有网格布局的 React 组件，但我无法将整个网格置于其容器的中心。我使用 Flexbox 进行布局，但网格项未正确居中。

设置如下：

1. 我有一个容器，应该使其子级水平和垂直居中。
2. 在容器内，我正在渲染三张应显示在响应式网格中的卡片。

这是我的代码：

import React from 'react';
import Section from './Section';
import ClipPath from './ClipPath';
import Arrow from './Arrow';
import BluetoothScannerIllustration from './Svg';

const About = () => {
  return (
    <Section crosses>
      <div className="container mx-auto max-w-6xl px-4">
  {/* Heading */}
  <h1 className="gradientText lg:text-6xl text-center text-5xl font-[500] text-white font-inter">
    We've Noticed A{' '}
    <span className="bg-gradient-to-r from-rose-400 to-red-500 bg-clip-text text-transparent">
      Major
    </span>{' '}
    Problem.
  </h1>
  <p className="text-n-4 font-inter text-xl sm:text-lg md:text-xl lg:text-xl text-center max-w-2xl mx-auto mt-5">
    Transportation hubs are overcrowded,
    <br className="block lg:hidden" />
    <span className="hidden lg:inline-block">‎ making people late and frustrated.</span> It's time for a smarter
    solution.
  </p>

  <div className="flex -mt-10 justify-center">
    <BluetoothScannerIllustration />
  </div>

  <div className="mt-12 max-w-6xl !mx-auto flex justify-center">
    <div className="grid grid-cols-1 items-center md:grid-cols-2 lg:grid-cols-3 gap-6 mx-auto justify-center">   
      <div
        className="relative items-center p-0.5 bg-no-repeat bg-[length:100%_100%] md:max-w-[24rem] w-full"
        style={{
          backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(`
            <svg preserveAspectRatio="none" width="384" height="366" viewBox="0 0 384 366" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="white" stroke-opacity="0.15" stroke-width="2"/>
              <path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="url(#paint0_linear_333_9188)" stroke-opacity="0.85" stroke-width="2"/>
              <defs>
                <linearGradient id="paint0_linear_333_9188" x1="192" y1="0" x2="192" y2="366" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#33CEFF"/>
                  <stop offset="0.562842" stop-color="#D633FF" stop-opacity="0"/>
                </linearGradient>
              </defs>
            </svg>
          `)}')`,
        }}
      >
        <div className="relative z-2 font-inter flex flex-col min-h-[22rem] p-[2.4rem]">
          <h5 className="text-2xl text-white mb-5">The Problem</h5>
          <p className="mb-6 text-n-3">
            Overcrowded transit areas, combined with inadequate infrastructure and poor planning, result in persistent delays that affect daily commuters and logistics.
          </p>
          <div className="flex items-center mt-auto">
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://psychcentral.com/adhd/why-are-people-with-adhd-always-late"
              className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider"
            >
              Explore more
            </a>
            <Arrow />
          </div>
        </div>
        <ClipPath />
      </div>

      {/* Solution Card */}
      <div
        className="relative p-0.5 bg-no-repeat bg-[length:100%_100%] md:max-w-[24rem] w-full"
        style={{
          backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(`
            <svg preserveAspectRatio="none" width="384" height="366" viewBox="0 0 384 366" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="white" stroke-opacity="0.15" stroke-width="2"/>
                <path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="url(#paint0_linear_333_9188)" stroke-opacity="0.85" stroke-width="2"/>
                <defs>
                <linearGradient id="paint0_linear_333_9188" x1="192" y1="0" x2="192" y2="366" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#33CEFF"/>
                    <stop offset="0.562842" stop-color="#D633FF" stop-opacity="0"/>
                </linearGradient>
                </defs>
            </svg>
          `)}')`,
        }}
      >
        <div className="relative z-2 font-inter flex flex-col min-h-[22rem] p-[2.4rem]">
          <h5 className="text-2xl text-white mb-5">The Solution</h5>
          <p className="mb-6 text-n-3">
            By using advanced analytics and IoT-enabled devices, we can optimize the flow of people and goods, reducing congestion and delays.
          </p>
          <div className="flex items-center mt-auto">
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://example.com/solution"
              className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider"
            >
              Learn More
            </a>
            <Arrow />
          </div>
        </div>
        <ClipPath />
      </div>

      {/* Impact Card */}
      <div
        className="relative p-0.5 bg-no-repeat bg-[length:100%_100%] md:col-span-2 w-full"
        style={{
          backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(`
            <svg preserveAspectRatio="none" width="384" height="366" viewBox="0 0 384 366" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="white" stroke-opacity="0.15" stroke-width="2"/>
              <path vector-effect="non-scaling-stroke" d="M32 1H319.453C328.037 1 336.238 4.5601 342.1 10.832L374.648 45.6545C380.015 51.3966 383 58.9629 383 66.8225V334C383 351.121 369.121 365 352 365H32C14.8792 365 1 351.121 1 334V32C1 14.8792 14.8792 1 32 1Z" stroke="url(#paint0_linear_333_9188)" stroke-opacity="0.85" stroke-width="2"/>
              <defs>
                <linearGradient id="paint0_linear_333_9188" x1="192" y1="0" x2="192" y2="366" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#33CEFF"/>
                  <stop offset="0.562842" stop-color="#D633FF" stop-opacity="0"/>
                </linearGradient>
              </defs>
            </svg>
          `)}')`,
        }}
      >
        <div className="relative z-2 font-inter flex flex-col min-h-[22rem] p-[2.4rem]">
          <h5 className="text-2xl text-white mb-5">The Impact</h5>
          <p className="mb-6 text-n-3">
            Enhanced transportation efficiency can lead to reduced emissions, improved commuter satisfaction, and economic growth.
          </p>
          <div className="flex items-center mt-auto">
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://example.com/impact"
              className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider"
            >
              Discover Impact
            </a>
            <Arrow />
          </div>
        </div>
        <ClipPath />
      </div>
    </div>
  </div>
</div>

    </Section>
  );
};

export default About;

这是目前的样子：https://ibb.co/hFScmDX

谢谢！

Answer 1

为了确保网格在其容器内正确居中，我们需要对样式以及 Flexbox 或 Grid 的使用进行一些调整。

在您的代码中，您同时使用了 flex 和 grid，但容器和网格项设置可能需要一些调整以确保正确居中。

为了使网格水平和垂直居中，我们可以使用 justify-center 和 items-center 属性。另外，我们可以使用 min-h-screen 来确保容器占据屏幕的整个高度。

这是为您提供的简化解决方案：

    <div className="flex justify-center items-center min-h-screen px-4">
  <div className="max-w-6xl w-full">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mx-auto">
      {/* Your Card Components */}
    </div>
  </div>
</div>

说明：

min-h-screen：此类赋予容器高度为屏幕高度的 100%。 flex justify-center items-center：这些类有助于将容器内的所有内容水平和垂直居中。 mx-auto：这确保网格水平居中。 w-full：这允许网格占据整个宽度，确保其正确居中。 在此解决方案中，我们将网格包裹在一个跨越全屏高度和宽度的 div 中，以使其正确居中。

这应该使网格正确居中。