JIYIK CN >

To center a div in React.js, displayset its div property to flex and its div alignItemsand justifyContentdiv properties to center . The contents of the div will be centered horizontally and vertically.

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

export default App;

If you don't want the div to take up the entire height, remove the height property from the style object .

We use inline styles to center a div in React.

Notice that we used two sets of curly braces when passing the style attributes to the div element.

The outer set of curly braces marks the expression to be evaluated, and the inner set is an object of styles and values.

注意When specified as an inline style, multi-word attributes are camelCase.

We can also extract styles into variables.

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

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

export default App;

Alternatively, we can center the div by writing our own css into .cssa file with a extension and importing it.

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

Here is how we import and use centered-divthe class.

import './App.css';

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

export default App;

When importing global CSS files in React, it is best to import the CSS file into the index.js file.

The index.js file is the entry point of our React application, so it will always be run.

On the other hand, if we import a CSS file into a component, the CSS styles may be removed after the component is unmounted.

A very common pattern in React is to extract common styles into the component that renders its children.

`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;

This example achieves the same result.

Whatever we pass between the opening and closing tags of the Center component will be centered on the page.