为什么 div 的宽度不占总宽度的 90%？

Question

你能告诉我为什么 div 的宽度不占总宽度的 90% 吗？ 当我这样写

  width: 90%;
  margin: 0 auto;

它需要宽度，但是当我这样写时，它不会

display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

这是我的代码

https://codesandbox.io/s/bitter-dawn-o6rx2

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: "90%";
  /* // width: 90%;
  margin: 0 auto; */
`;

如何使表格垂直和水平居中

Answer 1

 .testingWidth{ display:flex; flex-basis:100%; width:90%; max-width:90%; min-width:90%; margin:0 auto; background-color:#CCAACC; min-height:10vh; padding:0.125em; }

 <div class="testingWidth"> styling with class. </div> <div style="display:flex;flex-basis:100%;width:90%;max-width:90%;min-width:90%;margin:0 auto;background-color:#CCC;min-height:10vh;padding:0.125em;"> styling without class. <p>Do add flex-basis to your styling and check again.</p> </div>

Answer 2

除了一行之外，您所做的一切都是正确的：

更改此行

width: "90%";

对这个

width: 90%;

所以你最终的 CSS 将是

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 90%;
  margin: 0 auto; */
`;

Answer 3

您样式化的 Wrapper 组件的 CSS 应该类似于下面的示例。 请注意，在您的示例中，双引号约为 90%，这是无效的 CSS 值。 由于样式化的组件使用常规的 CSS 语法，因此必须为 90% 且不带双引号。

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 90%; //<=== here
  margin: 0 auto;
`;

如果您希望表单使用 100% 的包装器，则需要为表单提供 100% 的宽度

const StyledForm = styled.form`
width: 100%;
`

Answer 4

您需要更改width: "90%"; 到width: 90%;