时间戳

首页 > 解决方案 > 将元素定位在页面中间，与其他元素无关

css - 将元素定位在页面中间，与其他元素无关

问题描述

我是 CSS 的新手，我想将输入放置在页面中间，无论左侧的按钮如何，
+ 网站必须是响应式的。 在此处输入图像描述

我的 CSS 仅将它们定位在顶部中心，但我该如何设置top？（top不会在这里工作）

display: 'flex',
justifyContent: 'center',
  1. display: 'flex'阻止“电子邮件地址”（第三个）输入的 CSS display: 'block'，如何将其修复为以下？
 email: {
    width: 'auto',
    display: 'block',
    margin: theme.spacing(1),
  }

（页面是 ReactJS）

标签： cssstylesstyled-components

解决方案

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

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

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

推荐阅读