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

Posted 2023-03-15

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

【英文标题】：How can I create two <div>, but one of them has to be fixed in the center

【发布时间】：2021-08-29 15:33:33

【问题描述】：

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 固定在页面的中心，而加载器就在它旁边？

【问题讨论】：

请创建一个minimal reproducible example，如codesandbox

对不起，我刚刚添加了沙盒示例，谢谢！

Imo 这更像是一个 Material-ui 问题，所以我更新了标签以引起 Material-ui 人的注意...

grid 会更容易设置我猜codesandbox.io/s/pedantic-germain-gvlit

是的，效果很好@G-Cyrillus 谢谢！

【参考方案1】：

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

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

【参考方案2】：

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

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

export default function App() 
  return (
    <StyledBox>
      <div >
        <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;
`;

【讨论】：

我不能使用position: absolute 属性，因为我在下面渲染东西。我将不得不根据那个看起来有点奇怪的新位置移动我在搜索框下方的所有内容。

我不希望两个 div 都在中心，只希望第一个。我不关心第二个 div 的位置，只要它在第一个 div 旁边即可。