如何对组件进行垂直和水平居中反应？

Question

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

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

Answer 1

您的示例代码运行良好：

ReactDOM.render(
  <div
    style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
    >
    Hello, world!
  </div>,
  document.getElementById('root')
);

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

它必须对你的布局做些什么。

Answer 2

另一种选择是使用flex-box。

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

Answer 3

感谢您的测试+评论！造型最终很好，问题是由ComponentASD的布局造成的，实际上是MUI的CircularProgress https://material-ui.com/api/circular-progress/#demos

我将该组件包裹在渲染中的div中，并将样式应用于div，这解决了问题（使其保持静止并正确对齐）。