How To Center A Component Horizontally And Vertically In React

Posted on by Christopher
How To Center a component horizontally and vertically in React

Hi guys! In this article we’ll talk about how to center a component horizontally and vertically in React. Let me help you do that through the methods mentioned in this tutorial.

Center a component horizontally and vertically in React

Using justify-content and align-items

Firstly, I show you how to use justify-content, align-items, and display properties to center a component horizontally and vertically.

Here is a program that shows you how to use it:

import './App.css';
import React from 'react';

export default function App() {
    return (
    	<div className="center">
            <div className="card" style={{width: "18rem", backgroundColor: '#EED8AE'}}>
                <img 
                  src="https://learnshareit.com/wp-content/uploads/2022/09/cropped-learnshareit-logo.png" 
                  class="card-img-top" 
                  alt="..."
                />
                <div className="card-body">
                    <h5 className="card-title">LearnShareIT</h5>
                    <hr/>
                    <p className="card-text">We connect IT experts and students so they can share knowledge and benefit the global IT community.</p>
                    <a href="#" className="btn btn-primary">Go to Website</a>
                </div>
            </div>
        </div>
    );
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Output:

We set the values for justify-content and align-items to “center” to centralize elements horizontally and vertically. Also, display: "flex" helps us arrange and layout block elements more efficiently and flexibly than before.

Using absolute position

Alternatively, you can also use the position property and set its value to “absolute” to center the element in React. Let’s see how we do it:

import './App.css';
import React from 'react';

export default function App() {
    return (
    	<div 
          className="card" 
          style={{
          	width: "18rem", 
            position: 'absolute', 
            left: '50%', 
            top: '50%', 
            transform: 'translate(-50%, -50%)', 
            backgroundColor: '#EED8AE'
          }}
        >
            <img 
              src="https://learnshareit.com/wp-content/uploads/2022/09/cropped-learnshareit-logo.png" 
              class="card-img-top" 
              alt="..."
            />
            <div className="card-body">
                <h5 className="card-title">LearnShareIT</h5>
                <hr/>
                <p className="card-text">We connect IT experts and students so they can share knowledge and benefit the global IT community.</p>
                <a href="#" className="btn btn-primary">Go to Website</a>
            </div>
        </div>
    );
}

Output:

  • position: "absolute" – The element is positioned relative to its first positioned (Not static) ancestor element.
  • left: 50% – The element is shifted to the right 50% of its original position.
  • top: 50% – The element is shifted to the down 50% of its original position.
  • translate(-50%, -50%) –  moves the element 50% up, 50% left of its position.

Creating centered component

One convenient way is to create a reusable element. We create the “Centralize” component that handles centering, then we can reuse it in our app instead of adding styles every time to the component.

Take a look at this example:

import './App.css';
import React from 'react';
 
function Centralize(props){
    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh'
        }}>
        	{props.children}
        </div>
    );
}
 
export default function App() {
    return (
       <Centralize>
           <div className="card" style={{width: "18rem", backgroundColor: '#EED8AE'}}>
               <img 
                 src="https://learnshareit.com/wp-content/uploads/2022/09/cropped-learnshareit-logo.png" 
                 class="card-img-top" 
                 alt="..."
               />
               <div className="card-body">
                   <h5 className="card-title">LearnShareIT</h5>
                   <hr/>
                   <p className="card-text">We connect IT experts and students so they can share knowledge and benefit the global IT community.</p>
                   <a href="#" className="btn btn-primary">Go to Website</a>
               </div>
           </div>
       </Centralize>
    );
}

The result is the same as the two methods above. You may find this approach somewhat lengthy and time-consuming. However, when you need to center multiple elements and have to do this over and over. This method comes in really handy.

Summary

Through the above methods, I hope you have understood how to center a component horizontally and vertically in React. That is also all the content I want to convey in this article. Thanks for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *