# How To Center An Element With CSS

## **Introduction**

*CSS is an important asset to structure a page in the right direction. Even though HTML is the building block of a website, without the use of CSS, it will be difficult to navigate through the website.*

In this article, you will be taken through four processes to center an element with CSS using a login page. This is important because most times, people find it challenging to center an element and the process they take might be a long and stressful one.

The four methods to center an element are as follows:

* Flexbox
    
* Grid
    
* Margin
    
* Positioning
    

## **Flexbox**

Flexbox provides an efficient way to align items in a container. The main idea behind Flexbox is to enable a container element to change the size and position of its child elements to fill the available space and create a responsive layout.

To center a Login page, you need three elements:

* `display: flex;` - This CSS element will set the display of the form container to a flexible module which would give the container the ability to alter its height, width, and position.
    
* `justify-content: center;` - This element will define the alignment of the container on the main axis.
    
* `align-items: center;` - The align-item defines how items are laid out along the cross-axis. By setting it to center, the form container would be centered horizontally.
    

These three elements will be used in the body content of the HTML form tag to center the container vertically and horizontally:

### The HTML Code

```xml
<div class="container">
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>
```

* The div with a class of "container" element is the parent element of the form tag and any style given to it will affect the form.
    

### The CSS Styling

```css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
```

* The container was given a height of 100vh which makes it take up the full height of the viewport - the webpage.
    
* The `display: flex` property is used to make the container a flex container.
    
* `justify-content: center` and `align-items: center` is used to center the form both horizontally and vertically within the container.
    

## **Grid**

Grid provides a powerful way to create layouts. One of the common use cases of CSS Grid is to center an object within a container. CSS grid uses two elements to center an object and they are:

* `display: grid` -
    
* `place-items: center` -
    

To center an object with Grid:

* Using the HTML container from earlier, the grid elements will be applied to center the container.
    

```css
.container {
  display: grid;
}
```

* Set the `place-items` property to the center place. This will place the object in the center.
    

```css
.container {
  display: grid;
  place-items: center;
  height: 100vh;
}
```

* This will center the object both horizontally and vertically within the container.
    

## **Margin**

To center an object with a margin using CSS, you can use the `margin` property along with the `auto` value. Here's how:

```css
.container {
  width: 40%;
  margin: 3rem auto;
  height: 100vh;
}
```

* The width of the container is important and will determine the width of the form container. If the width of the form container is not set, the `margin: auto;` property will **NOT** be effective.
    
* The margin property is set to `0 auto`. This tells the browser to automatically calculate and evenly distribute the left and right margins of the div, thus centering it horizontally.
    

## **Positioning**

Positioning is a CSS concept that allows you to control the placement of an element on a web page. It is often used to center an element horizontally or vertically within its parent container.

To center an object with position using CSS, you can use the `position` and `transform` properties. Here are the steps to follow:

```css
.container {
  width: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

* In the code above, the `position` is set to `absolute` which allows us to position it relative to its nearest positioned ancestor, which is usually the body element.
    
* Next, we set the `top` and `left` properties to `50%`. This positions the top-left corner of the **container** at the center of its nearest-positioned ancestor.
    
* The `transform` property moves the container up and left by half its width and height, respectively. The `translate(-50%, -50%)` value does exactly that, by moving the container left by 50% of its width and up by 50% of its height.
    

## **Conclusion**

Depending on the situation and circumstances, many approaches might be used to center an element with CSS. Web designers can successfully center items on their web pages by comprehending and using these approaches, which improves the overall aesthetic appeal and user experience.

There are various techniques to achieve this, including using CSS properties such as `margin`, `position`, and `transform`. These techniques can be used to center an element horizontally and/or vertically within its parent container, depending on the specific requirements of the project.

If you found this article helpful, like and follow for more useful tips. Also, share with your friends.