如何使用CSS网格而不是边距水平居中div:0 auto

我想在页面上水平居中放置一个div，我不希望它的宽度超过400px，当页面宽度超过400时，div的左右两侧将有相等的空间，div的宽度将为400px，当页面小于400px时，div将占据整个屏幕的宽度

我已经习惯了使用

margin:0 auto

和

max width:400px

来实现这一点，但我想知道是否有一种方法可以通过css网格实现同样的效果

.fullwidth{
宽度：100%；
背景：红色；
}
.maxwidth{
最大宽度：400px；
保证金：0自动；
背景：蓝色；
颜色：白色；
填充：10px；
}

我有400像素宽：）

尝试以下操作

const fullWidth = {
  width: "100%",
  height: "100%",
  display: "grid",
  gridAutoFlow: "column",
  alignContent: "center", // vertically centered
  justifyContent: "center", // horizontally centered
};

const maxWidth = {
};

export default function Header({ title }) {
  return (
    <div style={fullWidth}>
      <div style={maxWidth}>{title}</div>
    </div>
  );
}

const fullWidth={
宽度：“100%”，
高度：“100%”，
显示：“网格”，
gridAutoFlow：“列”，
alignContent：“居中”，//垂直居中
justifyContent:“中心”//水平居中
};
常量最大宽度={
};
导出默认函数头（{title}）{
返回(
{title}
);
}

尝试以下操作

const fullWidth = {
  width: "100%",
  height: "100%",
  display: "grid",
  gridAutoFlow: "column",
  alignContent: "center", // vertically centered
  justifyContent: "center", // horizontally centered
};

const maxWidth = {
};

export default function Header({ title }) {
  return (
    <div style={fullWidth}>
      <div style={maxWidth}>{title}</div>
    </div>
  );
}

const fullWidth={
宽度：“100%”，
高度：“100%”，
显示：“网格”，
gridAutoFlow：“列”，
alignContent：“居中”，//垂直居中
justifyContent:“中心”//水平居中
};
常量最大宽度={
};
导出默认函数头（{title}）{
返回(
{title}
);
}

您有两个选择：

justify items:center设置

justify self:center

.fullwidth{
显示：网格；
网格模板列：1fr；
证明项目：中心；
背景：红色；
}
.maxwidth{
最大宽度：400px；
背景：蓝色；
颜色：白色；
填充：10px；
}

我在中间，最大宽度

您有两个选择：

justify items:center设置

justify self:center

.fullwidth{
显示：网格；
网格模板列：1fr；
证明项目：中心；
背景：红色；
}
.maxwidth{
最大宽度：400px；
背景：蓝色；
颜色：白色；
填充：10px；
}

我在中间，最大宽度

父节点上需要一个3列网格

外侧立柱展开以占用任何剩余的侧边空间，因此不需要留边

.fullwidth{
背景：红色；
显示：网格；
网格模板列：1fr最小值（0400px）1fr；
}
.maxwidth{
背景：蓝色；
颜色：白色；
填充：10px；
网格柱：2；
文本对齐：居中；
}

我在中间，最大宽度

父节点上需要一个3列网格

外侧立柱展开以占用任何剩余的侧边空间，因此不需要留边

.fullwidth{
背景：红色；
显示：网格；
网格模板列：1fr最小值（0400px）1fr；
}
.maxwidth{
背景：蓝色；
颜色：白色；
填充：10px；
网格柱：2；
文本对齐：居中；
}

我在中间，最大宽度

您也可以不定义任何模板：

.fullwidth{
背景：红色；
显示：网格；
证明内容：中心；
网格自动列：最小（400px，100%）；
}
.maxwidth{
背景：蓝色；
颜色：白色；
填充：10px；
文本对齐：居中；
}

我在中间，最大宽度

您也可以不定义任何模板：

.fullwidth{
背景：红色；
显示：网格；
证明内容：中心；
网格自动列：最小（400px，100%）；
}
.maxwidth{
背景：蓝色；
颜色：白色；
填充：10px；
文本对齐：居中；
}

我在中间，最大宽度

我已经扩展了上面的问题，应该可以澄清这些问题，如果有任何疑问，请告诉我，我会提供更多详细信息css没有使用camelCase.css在jsx中有@connexo你没有放jsx，你放css。另外请注意，您的结束标记在语法上不正确：

必须是

。感谢结束标记上的指针。我已经扩展了上面的问题，应该可以澄清这些问题，如果有任何疑问，请告诉我，我会提供更多详细信息css不使用camelCase.css在jsx does@connexYou没有放置jsx，你把CSS。另请注意，您的结束标记在语法上不正确：

必须是

。感谢结束选项卡上的指针将标题居中，但内部div上没有设置1280px的最大宽度。如果需要，您可以添加最大宽度。添加最大宽度时，内部div的宽度仅与内容的宽度相同，当页面宽度大于1280px时，我希望宽度为1280px，当页面宽度小于1280px时，宽度为100%？为什么你要用Javascript和JSX回答CSS问题？@connexo：这个答案基于OP问题的初稿……这个标题居中，但内分区上没有设置1280px的最大宽度？你可以添加最大宽度如果需要，添加“最大宽度”时，内部div的宽度仅与内容的宽度相同，当页面宽度大于1280px时，我希望宽度为1280px，当页面宽度小于1280px时，宽度为100%？为什么你要使用Javascript和JSX回答CSS问题？@connexo:这个答案基于OP问题的初稿……是的，这很接近，但你会注意到蓝色框与内容的宽度相同，而不是400px这是你自己所说的要求，最大宽度为400px。如果你想要一个固定的宽度，为什么要使用

max width

？是的，我确实希望最大宽度为400px，但是当页面宽度超过400px时，我也希望它是400px，我很困惑。我还是不明白你期望的行为是什么。所以你想要一个400px的固定宽度？是的，这很接近，但是y