如何在 React.js 中将一个 div 居中

作者

在 React.js 中居中一个 div

How to center a div in React.js

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

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

export default App;

如果您不想使 div 全高，请height从对象中删除该属性style。

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

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

花括号的外层标记一个要计算的表达式，内层是样式和值的对象。

请注意，当指定为内联样式时，多词属性是驼峰式的。

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

应用程序.js
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 居中。

应用程序.css
.centered-div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

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

应用程序.js
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 中一个非常常见的模式是将常用样式提取到呈现其子项的组件中。

应用程序.js
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都会在页面上居中。

–

发表评论