Center a div or element in many ways using CSS
Tags: webdev, css, html, beginners
Published: 2022-10-19 11:25:40

_As a beginner, Centering things is one of the most difficult aspects of CSS. You can center a div in a few different ways in CSS. We're trying to understand how to do such thing in easy way.
We'll see how can center a div or element, Horizontally and Vertically._

**Let's get started!**

Firstly, We consider two elements or containers or div, where one is parent div or container and the another one is child div or container as the below of html code -
![html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bez4w1bkltj3tbfcz60k.png)

Here, You must need to take any fixed height to the parent div element. Otherwise, you can't get proper layouts.

### **Using CSS Flexbox**
The _**Flexible Box Layout Module**_, makes it easier to design **_flexible responsive layout_** structure without using _**float or positioning**_. The reason you'd choose to use flexbox is because you want to lay a collection of items out in _**one direction/dimension**_.
This allows elements to align and distribute space within a container. Using _**flexible widths and heights**_, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for _**responsive design systems**_.

> _You can use flexbox for a few main things as **scaling**, **vertically** and **horizontally aligning**, and **re-ordering elements** within a container. These are best used on page components within a parent element._

**1. Flexbox on parent container**
This technique is one of my favorite of all. Here, all the CSS properties are defined under the parent container.

We define the parent div with _**display: flex**_ property along with **_justify-content_** (for horizontal placement) and _**align-items**_ (for vertical placement) **_center_**. These properties come with Flex specifications.

![CSS styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdwimabl2eydh2taetvw.png)


**2. Using Flexbox and margin property**
The flex property sets the flexible length on flexible items.

So, We define the parent div with _**display: flex**_ property. Besides, we need to add the child div with **_margin: auto_** property. 
The margin property to auto used to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

![CSS styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iltg6vbc6jjg599wht6a.png)


**3. Using Flexbox and align-self property**
Again, We define the parent div with _**display: flex**_ property along with **_justify-content: center_** (to justify items along the center of the parent div). Furthermore, we have to add **_align-self: center_** property to the child div. 
The align-self CSS property specifies the alignment for the selected item inside the flexible container.  Also, It overrides a flex item's align-items value. 

![CSS styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpbk2ve0bldu8v7ynr5n.png)


### **Using CSS Grid**
**_CSS Grid_** is a _powerful tool_ that allows for **_two-dimensional layouts_** for columns and rows to be created responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.

> _CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. The features of CSS Grid Layout are **Flexible Track Sizes**, **Item Placement**, **Alignment Controls** and so on. CSS Grid Layout helps us build a more **complex layouts** using both columns and rows._

**4. Using Grid on parent container**
We define the parent div with _**display: grid**_ property along with **_justify-content_** (for horizontal placement) and _**align-items**_ (for vertical placement) **_center_**.

Grid layout enables to align elements into columns and rows. To justify items along the center of the parent div in vertically and horizontally, we use align-items and justify-content properties to center value of a grid layout.

![CSS styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o531pasqs0bivc64qm77.png)


**5. Using Grid and place-items property**
Again, We define the parent div with _**display: grid**_ property for grid layout. And **_place-items: center_** for vertical placement in center. 
The place-items property in CSS Grid is shorthand for the align-items and justify-items properties, combining them into a single declaration.

![CSS styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dev7rt359cxjl6vihtre.png)

**6. Using Grid properties on parent and child containers**
Similarly, we define **_display: grid_** to the parent div element here. Also, Add **_align-self_** and **_justify-self_** to **_center_** in the child div element.
The align-self CSS property overrides a grid item's align-items value. In Grid, it aligns (vertical alignment) the item inside the grid area.
Additionally, The CSS justify-self property sets the way a box is justified (horizontal alignment) inside its alignment container along the appropriate axis.

![CSS styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pi8xmqeofm1o7gqfg44a.png)


###**Using CSS Position**
By default, the position property for all HTML elements in CSS is set to static. This means that if you don't specify any other position value or if the position property is not declared explicitly, it'll be static.
This property takes in five values: _**static**_, **_relative_**, **_absolute_**, **_fixed_**, and **_sticky_** .

**7. Using CSS Position and Transform property**
We use positioning and the transform property to vertically and horizontally center the child div or element.
We define _**position: relative**_ to the parent div. Also, added _**position: absolute**_ , _**top: 50%**_ , _**left: 50%**_ and _**transform: translate(-50%, -50%)**_ to the child div.
In the parent div, we use position to relative because of positioning the child div into absolute position as its inner element.
In the child div, we use position to absolute for taking out of the regular flow of the element and giving it to a custom position. Top and left to 50%, it will leave 50% free space from the top left side of the parent div. And using the transform property, **_translate(x, y)_** , **_translateX_** and _**translateY**_ to -50%, means the child element will take the backward space of its 50% width to vertically and horizontally center to the parent div.

![CSS Position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh6lg78ivpveh4wf2mdv.png)