如何在反应中处理“居中”您的网站

如何解决如何在反应中处理“居中”您的网站

我认为这是一个相对简单的问题，如何让我的网站“居中”反应，让我解释一下。这是我刚刚在 figma 中制作的东西的图片，现在正在尝试在 react 中实现 https://gyazo.com/e940da061c627cbb5d30571efebf2c7b 我想知道如何在不为我的所有元素添加边距的情况下获得左侧和右侧的边距（同时仍然允许内容像导航栏的侧面一样溢出）。某种“布局”组件，但我正在努力使其正常工作，并且让您的网站像这样对齐是一件很常见的事情，我相信这里有人知道。感谢所有帮助，谢谢。 （我使用的是顺风 css，最好不想使用不同的框架或其他东西）

解决方法

您可以在主 div 内制作一个包装器。所以主 div 将覆盖您网站的 100% 宽度。然后它里面的包装器有这样的属性

main {
  height: 100vh;
  width: 100%;
}

.wrapper_main {
  max-width: 1000px;
  margin: 0 auto;
  width 100%;
  background-color: pink;
}

max-width 会限制您的网站扩展。保证金自动使其始终位于中心。对于较小的设备，宽度为 100%，因此两者之间没有余量。背景色最适合调试 css 代码。