CSS Grid to Horizontally Center Elements

Centering the element horizontally is the basic task while developing the web pages. You can use CSS Grid layout for this purpose, and it is considered to be a modern approach for this task.

The Grid layout is used to create a two-dimensional layout system, and it supports the position of the elements in both rows and columns. This method is considered to be the most structured way of organizing the elements.

What is Grid layout in CSS?

Grid layout in CSS is used for dividing your webpage into rows and columns to align the items accurately in a particular position. With some simple CSS rules, you can control the size, alignment, and spacing of elements within the grid.

How Does CSS Grid Horizontally Center an Element?

CSS Grid can be used for horizontally centering an element. You can do this by setting the parent container to display: grid and using justify-content: center for centering the child element horizontally. You can also use grid-template-columns for defining the column and position the element to center using grid-column.

Example 1: Centering div Using Grid

The <div> is created for centering the elements horizontally. You can apply CSS properties like background color and padding to the centered div.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Example</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 100vh;
      background-color: pink;
    }
    .center {
      background-color: orange;
      padding: 30px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="center">
    Element is Centered Using Grid
    </div>
  </div>
</body>
</html>

Output:

Explanation: This code can be used to create a simple div for centering the element horizontally. The class .container centers the content horizontally, and the inner content gets styled using the .centered class.

Industry-Aligned Curriculum to Master Modern Web Technologies

Professional Web Development Courses

Explore Program

Example 2: Centering the Button Using Grid

The button is created in the center of the page horizontally. You can apply some CSS properties like background color, text color, padding, etc., for styling the button.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Button</title>
  <style>
    .container {
      display: grid;
      place-items: center; 
      height: 100vh;
      background-color: black;
    }
    .button {
      background-color: blue ;
      color: whitesmoke;
      padding: 15px 25px;
      font-size: 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.4s;
    }
    .button:hover {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="button">Intellipaat</button>
  </div>
</body>
</html>

Output:

Explanation: The code creates the button with a horizontal centering property. The CSS properties are added to the button, and the hover makes the color of the button change when you click on it.

Example 3: Centering the Input Field Using Grid

The input field is centered horizontally using a CSS grid. And some styling properties can be applied further.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Input Field</title>
  <style>
    .container {
      display: grid;
      place-items: center; 
      height: 90vh;
      background-color: black;
    }
    .input-field {
      width: 200px;
      padding: 10px;
      font-size: 18px;
      border: 3px solid #ccc;
      border-radius: 6px;
      outline: none;
      transition: border-color 0.3s;
    }
    .input-field:focus {
      border-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <input type="text" class="input-field" placeholder="Enter text...">
  </div>
</body>
</html>

Output:

Explanation: You can use this code for centering the input field by applying CSS grid to the .container, which contains the place-items: center property.

Get 100% Hike!

Master Most in Demand Skills Now!

Conclusion

The Grid layout aligns the elements horizontally center, which is suitable for aligning in both rows and columns. You can refer to the above-discussed examples for centering different types of elements. These codes will help you get well-structured web pages.