迹忆客 专注技术分享

要在 React.js 中居中 div，请将其 display 属性设置为 flex 并将其 alignItems 和 justifyContent 属性设置为 center。 div 的内容将水平和垂直居中。

`const App = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
      }}
    >
      <h2>hello world</h2>
    </div>
  );
};

export default App;

如果不想让 div 占整个高读，请从样式对象中删除 height 属性。

我们使用内联样式在 React 中将 div 居中。

请注意，在将样式属性传递给 div 元素时，我们使用了两组花括号。

花括号的外部集合标记要评估的表达式，内部集合是样式和值的对象。

注意 ，当指定为内联样式时，multi-word 属性是驼峰式的。

我们还可以将样式提取到变量中。

const App = () => {
  const styles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
  };

  return (
    <div style={styles}>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

或者，我们可以通过将自己的 css 写入具有 .css 扩展名的文件并导入它来使 div 居中。

.centered-div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

下面是我们如何导入和使用 centered-div 类。

import './App.css';

const App = () => {
  return (
    <div className="centered-div">
      <h2>hello world</h2>
    </div>
  );
};

export default App;

在 React 中导入全局 CSS 文件时，最好将 CSS 文件导入 index.js 文件。

index.js 文件是我们 React 应用程序的入口点，所以它总是会被运行。

另一方面，如果我们将 CSS 文件导入组件，则在卸载组件后，CSS 样式可能会被删除。

React 中一个非常常见的模式是将常用样式提取到呈现其子级的组件中。

`function Center({children}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
      }}
    >
      {children}
    </div>
  );
}

const App = () => {
  return (
    <Center>
      <h2>hello world</h2>
    </Center>
  );
};

export default App;

这个例子达到了同样的结果。

无论我们在 Center 组件的开始标签和结束标签之间传递什么，都会在页面上居中。