如何在反应中垂直和水平居中组件？答案

【问题标题】：How to vertically and horizontally center a component in react?如何在反应中垂直和水平居中组件？
【发布时间】：2018-09-11 21:11:56
【问题描述】：

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

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

【问题讨论】：

你的组件父级的position属性是什么？
需要查看组件及其正在渲染的父组件以帮助您。如果组件被分段或包装在非 DOM 元素中，则并非所有组件都可以将样式 1 映射到 1。绝对定位的元素也将流向具有relative 位置的第一个父元素。
父级位于relative。这是一个普通的div。渲染的组件是 MUI CircularProgress - material-ui.com/demos/progress。 @mattdevio 提出了一个很好的观点，即它没有被包裹在 DOM 元素中，所以我将 CircularProgress 包裹在一个 div 中，并将绝对样式应用于 div，这很有效！
How to center an element horizontally and vertically?的可能重复
使 div 居中是在 CSS 中完成的，而不是在 React 中。所以，这个问题就变成了“如何在 CSS 中居中元素”。 What React Does (and Doesn't Do)

标签： javascript css reactjs

【解决方案1】：

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

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

【讨论】：

你可以多解释一下..我想

【解决方案2】：

您的示例代码运行良好：

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

它必须与您的布局有关。

【讨论】：

【解决方案3】：

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

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

【讨论】：

是的，我在他们的 MUI 沙箱中测试过，效果很奇怪。对象根据微调器进度移动。我想转换效果在关键帧动画中被覆盖。将组件包装在 div 中确实可以解决此问题。如果你想摆脱多余的 div，你可以在父级上使用 flex box。我测试了它并且有效。 ` display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center',`

【解决方案4】：

如果你想在组件中使用它，只需在组件中调用它：

.Login {
text-align: center;
background-color: #2681C6;
min-height: 100vh;}

您的 jsx 文件应该有类似的名称，使用“className”：

<div className="Login"><div>

【讨论】：

【解决方案5】：

这是您需要在父组件上使用的 flexbox。

   .Parent {
        display: flex,
        flexFlow: row nowrap,
        justifyContent: center,
        alignItems: center,
    {

它将使孩子垂直和水平居中您还可以按照我在下面向您展示的方式对齐每个组件

render() {
  return (<Childcomponent 
    style={{
    display: flex,
    flexFlow: row nowrap,
    justifySelf: center,
    alignSelf: center,
  }} />);
}

【讨论】：