React – Center a component horizontally and vertically
In this post we will give you information about React – Center a component horizontally and vertically. Hear we will give you detail about React – Center a component horizontally and verticallyAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to center a component horizontally and vertically in React with the help of examples.
Consider, we have the following component in our react app:
import React from 'react';function Home(){ return ( <div className="center"> <h1>Home Component</h1> </div> )}export default Home;To center a component horizontally and vertically in React, add the display:flex, justify-content: center and align-items: center to the react component CSS class.
‘justify-content: center’ centers the component horizontally.
‘align-items: center’ centers the component vertically.
Here is an example:
import React from 'react';function Home(){ return ( <div className="center"> <h1>Home Component</h1> </div> )}export default Home;.center{ display: flex; justify-content: center; align-items: center; height: 100vh;}or we can add it inline using the style object in React.
import React from 'react';function Home(){ return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}> <h1>Home Component</h1> </div> )}export default Home;Centering using absolute position
We can use the absolute positioning in react.js to center the component horizontally and vertically.
Here is an example:
import React from 'react';function Home(){ return ( <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}> Home Component </div> )}export default Home;Here we added position:absolute to the component div element, so the element breaks out from the normal document flow and is positioned to its relative parent (eg: body or parent component).
The left:50% moves the element 50% right from its position.
The top:50% moves the element 50% down from its position.
The translate(-50%, -50%) moves the element 50% up, 50% left of it’s position.
Creating the center component
We can also create a reusable center component in React, so we can reuse it in our app instead of adding the styles every time to the component.
Example:
import React from 'react';function Center(props){ return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}> {props.children} </div> )}export default Center;Using the Center component:
import React from 'react';import Center from './center.js'function Home(){ return ( <div> <Center> <h1>Home Component</h1> </Center> </div> )}export default Home;Hope this code and post will helped you for implement React – Center a component horizontally and vertically. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs