如何在 React.js 中使 div 居中

要在 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 组件的开始标签和结束标签之间传递什么,都会在页面上居中。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 如何在 React.js 中使 div 居中