One of the common scenario in a webpage development is to display an element at the center of a page or within an element which act as its container.We can use the CSS Flexbox property to center an element horizontally, vertically, and at the center of a page/container.
Following code written in the conatiner’s style, is used to center the div element horizontally.
display: flex;
justify-content: center;
display: flex; allows us to use Flexbox and its properties, while justify-content: center; aligns the heading to the center horizontally.
Following code is used to align-content: center; to center the heading vertically
display: flex;
align-content: center;
Main scenario, to display the heading at the center of the page we can use both the horizontal and vertical alignment properties of CSS Flexbox. Here’s how:
Combine the properties to align heading horizontally and vertically to the container.
Here are the three lines of code we added to the container element above:
display: flex;
justify-content: center;
align-content: center;
Above mentioned example is included in single html page and code is:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
table{
text-align: center;
}
div{
height:250px;
width:250px;
border: 1px solid;
background-color: lightgreen;
border-radius: 3px;
color: black;
}
.center{
display: grid;
justify-content: center;
align-content: center;
}
.horizontal{
display: grid;
justify-content: center;
}
.vertical{
display: grid;
align-content: center;
}
h3{
height:50px;
width:150px;
}
</style>
</head>
<body>
<table><tr>
<td><h4>Align Horizontaly </h4>
<div class=”horizontal”>
<h3>Jobin And Jismi</h3> </div></td>
<td> <h4>Align Vertically</h4>
<div class=”vertical”>
<h3>Jobin And Jismi</h3> </div></td>
<td><h4>In the center</h4>
<div class=”center”>
<h3>Jobin And Jismi</h3> </div></td>
</tr>
</table>
</body>
</html>
Our page :
