Center A Div With Flex!

#webdev #tutorial #beginners #javascript

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

const boxStyle = {
    display: "flex",
    justifyContent: "center", 
    alignItems: "center"
};

<div style={boxStyle}>
  <div> Example Div </div>
</div>

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.

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>
 );
}

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>