如何创建两个 <div>，但其中一个必须固定在中心

Question

css 不是我的强项。我正在尝试创建两个 Box 或两个 div，但其中一个必须固定在页面的中心，另一个必须适应，就在第一个旁边。它只是在页面中间（第一个div）构建一个textField，并在textField旁边构建一个加载微调器（作为第二个div）。

我正在尝试使用styled-components：

<StyledBox>
   <StyledTextFieldContainer>
     <TextField/>
   </StyledTextFieldContainer>
   <StyledLoaderContainer>
     Loading...
   </StyledLoaderContainer>
</StyledBox>

const StyledBox = styled(Box)`
  width: 90%;
  justify-content: center;
  align-items: center;
  display: flex;
`;

const StyledTextFieldContainer = styled(Box)`
  width: 70%
  display: flex;
  align-items: flex-end;
`;

const StyledLoaderContainer = styled(Box)`
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

问题在于我的textField 不在正中间，因为Loader 将它推向了左侧（我想这是因为它们都在中间。

CodeSandBox 与示例：https://codesandbox.io/s/weathered-tree-r4tdm?file=/src/App.js

我怎样才能将textField 固定在页面的中心，而加载器就在它旁边？

Answer 1

嘿，你想要这样吗？然后根据您的要求在代码margin-top或padding-top中添加一行。

const StyledBox = styled(Box)`
  position: absolute;
  width: 90%;
  justify-content: center;
  //align-items: center;
  display: flex;
  margin-top: 40vh;
`;

Answer 2

我已经在沙盒上测试了您的代码，如果您只希望 div 位于页面的中心，那么此代码应该可以满足您的需求。

import { Box, TextField } from "@material-ui/core";
import styled from "styled-components";
import "./styles.css";

export default function App() {
  return (
    <StyledBox>
      <div width="70%">
        <TextField label="Fixed in the center" />
      </div>
      <div>
        Loading...
      </div>
    </StyledBox>
  );
}

const StyledBox = styled(Box)`
  position: absolute;
  top: 50%;
  left: 50%;
  background:red;
  transform: translate(-50%,-50%);
  width: 90%;
  justify-content: center;
  align-items: center;
  display: flex;
`;