无论其他元素如何，将元素定位在页面中间

Question

我是 CSS 的新手，我想将输入放在页面中间，而不考虑左侧的按钮，
+ 网站必须响应。

我的CSS只把它们放在顶部中心，但是我怎么设置top我的选择？（top 在这里不起作用）

display: 'flex',
justifyContent: 'center',

 email: {
    width: 'auto',
    display: 'block',
    margin: theme.spacing(1),
  }

(页面是ReactJS)

Answer 1

您可以使用视口单位进行操作并进行翻译。例如：

  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);

1vh是相对于视口高度的1%，1vw是相对于视口宽度的。所以左上角位于屏幕中间。现在你把整个东西翻译成它自己的宽度和高度的 50%。

Answer 2

或者要使用 display:flex 实现此目的，您必须将 html 和正文的高度设置为 100%。

html, 
body {
    height: 100%;
}

Position elements in the middle of page regardless to other elements