How To Center An Element With CSS
Tags: webdev, programming, tutorial, css
Published: 2023-05-09 08:37:17

## 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:
1. - Flexbox
2. - Grid
3. - Margin
4. - positioning

For the sake of this article, I will use a form page to show the results of using these methods.


## 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 the Login page, I 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
```
<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 CSS Styling
The "**container**" element is the parent element of the form tag and any style given to it will have an effect on the form.

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

We have a container element with 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, and 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

Create a container element and apply the display: grid property to it.

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

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

```
.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:

```
.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:

```
.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 to 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
Centering an element on a web page is a common task in web development. 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.