Centering content on a webpage is a common requirement in web development, whether it’s text, images, or entire sections. In this guide, we’ll explore two methods to achieve content centering using HTML and CSS. These methods provide flexibility and can be applied to various elements within your web layout.
Method 1: Using CSS Flexbox
CSS Flexbox is a powerful layout model that simplifies the alignment and distribution of elements within a container. It provides a straightforward way to center content both horizontally and vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Content with Flexbox</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Roshan Kumar Jha</h1>
</div>
</div>
</body>
</html>Output:-
Method 2: Using CSS Grid
CSS Grid is another layout model that allows for precise control over the positioning and alignment of elements within a grid-based layout. It offers a convenient way to center content using grid properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Content with CSS Grid</title>
<style>
.container {
display: grid;
place-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Roshan Kumar Jha..!</h1>
</div>
</div>
</body>
</html>
Hopefully, It will help you…!!!