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:

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.