Question

如何使用CSS-in-JS实现绝对居中？当我使用以下代码时，我的组件在屏幕上移动。我猜翻译被应用了很多次，而不是一次。怎么回事，如何在不使用库的情况下进行修复？

  render() {
      return (<ComponentASD 
        style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)'
      }} />);
    }

Answer 1

您的示例代码运行良好：

<section aria-label="payment options">
  ...
</section>
<section aria-label="summary of order">
  ...
</section>

https://codepen.io/anon/pen/JaLLmX

它必须与您的布局有关。

Answer 2

另一种选择是使用弹性框。

<div style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
}}>
    Hello world
</div>

Answer 3

感谢测试+评论！样式最终没问题，问题是由ComponentASD的布局引起的，它实际上是MUI的CircularProgress https://material-ui.com/api/circular-progress/#demos

我将该组件包装在render内部的div中，并将样式应用于div，从而解决了该问题（保持其静止并正确对齐）。

如何在反应中垂直和水平居中放置组件？

3 个答案: