How To Center A Div In React.js

Don’t worry about not knowing how to center a div in React.js. This article will show you how to do it in a few easy steps. Check it out.

How to center a div in React.js

The div tag is used to group elements in areas of the website. Those areas include the header (the group of content at the top of the web page), global navigation (links between pages in the website), page body (the body of the page’s content), and content (including the text and images of the article), sidebar (sub-content running along the left and right sides of the website), and footer (group of content at the bottom of the web page). So how to center the div tag? Check out a few ways to find the answer below.

Use flex-box method

Flexbox is a layout mode that will scale the elements inside to display on all devices. In other words, you don’t need to set the element’s size; don’t let it float. Just set it to display horizontally or vertically, then the elements inside can display as you like. 

In this example, we will use two methods to align vertically and horizontally in flexbox: justify-content and align-items.

Code:

import React from "react";
 
function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
      className="container"
    >
      <div
        style={{
          backgroundColor: "red",
          color: "white",
          padding: "10px",
        }}
      >
        {" "}
        Center a div | LearnShareIT
      </div>
    </div>
  );
}
 
export default App;

Output:

So in the parent div tag “container,” we apply to it three properties display flex, justifyContent: center, and align-items: center so that the inner child div tag is centered vertically and horizontally.

Use the absolute position method

The position: absolute property in CSS has the effect of helping to position the element absolutely according to the outer element, or at least according to the browser window. The absolute property defines the element’s coordinates according to a relative parent tag (if any). If there is no parent tag, it will follow the body of the entire web page. 

So we can set the position value of the div tag to absolute, then use the left and top properties to center it vertically and horizontally.

Finally, use the transform property to align the center because when we align left, the top 50% will be redundant with the content of the inner child tags. The results we get in both ways are the same.

Syntax:

translate(x,y)

Parameter:

• x: length of the element moving along the x-axis.
• y: the length of the element moving along the y-axis.

Code:

import React from "react";
 
function App() {
  return (
    <div
      style={{
        position: "absolute",
        left: "50%",
        top: "50%",
        transform: "translate(-50%, -50%)",
      }}
      className="container"
      >
       
      <div
        style={{
          backgroundColor: "blue",
          color: "white",
          padding: "10px",
        }}
      >
        {" "}
        Center a div | LearnShareIT
      </div>
    </div>
  );
}
 
export default App;

Output:

Summary

We have shown you how to center a div in React.js. After reading this article, you know some simple ways like using the flex-box method or the absolute position method. Let’s try these methods to get your desired results. Good luck for you!

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs