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
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.
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.
Alternative Methods to Horizontally Center the Element
- Using Flexbox
- Using margin:auto
- Using position: absolute
- Using text-align: center, text-align: left, and text-align: right
- Using float: right and float: left
- Using margin: 0 auto
- Using the display: table method
Check out these resources on mastering Backend logic and SQL data handling.-
Make A Div Fill The Height Of The Remaining Screen Space – Improve your knowledge of make a div fill the height of the remaining screen space in this blog.
Maintain The Aspect Ratio Of A Div With Css – Improve your knowledge of maintain the aspect ratio of a div with css in this blog.
How To Center Absolutely Positioned Element In Div Using Css – Improve your knowledge of how to center absolutely positioned element in div using css in this blog.
Merging Objects Javascript – Improve your knowledge of merging objects javascript in this blog.
Automatic Semicolon Insertion In Javascript – Improve your knowledge of automatic semicolon insertion in javascript in this blog.
Css Margin 0 Auto To Horizontally Center Element – Improve your knowledge of css margin 0 auto to horizontally center element in this blog.
Are Non Void Self Closing Tags Valid In Html5 – Improve your knowledge of are non void self closing tags valid in html5 in this blog.
Css Masonry Layout – Improve your knowledge of css masonry layout in this blog.
Html Computer Code Elements – Improve your knowledge of html computer code elements in this blog.