DEV Community

Julian Gaston
Julian Gaston Subscriber

Posted on

Center A Div With Flex!

Can you center a div? Centering a div is not intuitive. Whether you are a beginner or a pro, this tutorial can help you in a pinch! The easiest approach to centering a div is by using Flex.

Flex also known as Flexible Box Layout works by automatically sizing the divs based on viewport. Thats the gist, I use This Amazing Flex Reference from time to time (mostly when I forget ๐Ÿ˜†).

TLDR;

#random-div {
    display: flex;
    justify-content: center; 
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode
const boxStyle = {
    display: "flex",
    justifyContent: "center", 
    alignItems: "center"
};

<div style={boxStyle}>
  <div> Example Div </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Information

In this example I am using flex, alignItems, and justifyContent. We set the attribute display to flex. We set the attribute to alignItems to center along the main axis (vertical using flex-direction: column;) and justifyContent to center items along the cross axis (horizontal using flex-direction: row;). I also have extra attribute such as border-color, border-style, and background-color to name a few. These are styling the divs themselves and have nothing to do with the alignment.

Image of FlexBox main axis and cross axis
Photo by: FreeCodeCamp

Example:

There are 3 divs:

  • #container
  • #row-container
  • #row

The container div is responsible for the foundation of the other divs. This is where we define our width, height and what kind of display type we want our children elements to have. In order for justifyContent and alignItems to work, we must set the parent containers display attribute to a value of "flex".

The rowContainer is responsible for defining the height and width that our individual rows can use. I am also using text-align: center; in rowContainer to center align the "div 1", "div 2", "div 3" text.

The row div takes up a 100% of the space it is given. If you have one row, you will see a box. If you have 3 rows, you will see 3 rows in a box.

Image of Boxes


React Example:

export function MyBoxComponent {

const container = {
  height: "500px",
  width: "800px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderStyle: "solid",
  borderColor: "black",
  backgroundColor: "white",
}

const rowContainer = {
    borderStyle: "solid",
    display: "inherit",
    text-align: "center",
    height: "200px",
    width: "200px",
}

const row = {
   height: "100%",
   width: "100%",
}

return (
     <div style={container}>
        <div style={rowContainer}>
           <div style={row}>
               Div 1
           </div>
           <div style={row}>
               Div 2
           </div>
           <div style={row}>
               Div 2
           </div>
        </div>
     </div>
 );
}


Enter fullscreen mode Exit fullscreen mode

HTML Example:

<html>
<head>
<style>
#container {
  height: 500px;
  width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: black;
  background-color:white;

}

#row-container {
    text-align:center;
    border-style: solid;
    display:inherit;
    height:200px;
    width: 200px;
}

#row {
   height: 100%;
   width: 100%;
}

</style>
</head>
<body>

<div id="container">
  <div id="row-container">
    <div id="row" style="background-color:grey;">div 1</div>
    <div id="row" style="background-color:cyan;">div 2</div>
    <div id="row" style="background-color:blue;">div 3</div>
  </div>
</div>


</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
jason_john_cb1b8822a5b5b2 profile image
Jason John

Amazing work as always from JMilkDevelopments!