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

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>