将元素定位在页面中间，而不考虑其他元素[重复]答案

【问题标题】：Position elements in the middle of page regardless to other elements [duplicate]将元素定位在页面中间，而不考虑其他元素[重复]
【发布时间】：2021-10-20 04:24:14
【问题描述】：

我是 CSS 新手，我想将输入放置在页面中间，不管左侧的按钮如何，
+ 网站必须是响应式的。

我的 CSS 仅将它们定位在顶部中心，但我如何根据自己的选择设置 top？（top 在这里不起作用）

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

display: 'flex' 阻止了“电子邮件地址”（第三个）输入的 CSS display: 'block'，如何将其修复为低于？

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

（页面是 ReactJS）

【问题讨论】：

这能回答你的问题吗？ Positioning <div> element at center of screen
@JWGeertsma 不，我以前试过这个，只有一个 div 元素很好，见帖子标题
您对@JWGeertsma 链接的问题说不，下面您说感谢与链接问题中的答案几乎相同的答案（PS：您不需要视口单元，使用固定位置）
您对那里存在的答案表示感谢，因此不确定您的评论证明了什么。您正在确认链接的问题是您所需要的

标签： css styles styled-components

【解决方案1】：

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

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

1 vh 相对于视口高度的 1%，1 vw 相对于视口宽度。所以左上角位于屏幕的中间。现在你将整个东西平移了它自身宽度和高度的 50%。

【讨论】：

谢谢！这对我帮助很大，但我没有得到transform: translate，我在developer.mozilla.org/en-US/docs/Web/CSS/transform 中阅读但不明白。
也许这有帮助：css-tricks.com/centering-percentage-widthheight-elements

【解决方案2】：

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

html, 
body {
    height: 100%;
}

【讨论】：

我的应用使用 ReactJS，所以我不使用 body