Center A Div With Flex!
Tags: webdev, tutorial, beginners, javascript
Published: 2023-11-29 05:05:57

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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) from time to time (mostly when I forget :laughing:).

## **TLDR;**

```css
#random-div {
    display: flex;
    justify-content: center; 
    align-items: center;
}
```
```jsx
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx5hdh8wnbkgi7rrravm.png)<figcaption> Photo by: FreeCodeCamp </figcaption>




### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2qqsh2dj225lxz6os5o.png)






---

### React Example: 
```react
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
<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>
```