javascript - 如何在 react 中垂直和水平居中组件？

Question

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

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

Answer 1

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

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