@coder 1297
VERTICAL CENTERING
2021-11-17 00:28 · 3 min read
Vertical centering is a method using which we can align the center to a child element of an HTML container element.
CSS Vertical Centering
Vertical centering is a process to center an HTML element vertically. We need to set parent div position as relative position and child div as absolute position.
<style>
/*Container Div */
.parent{
background-color:black;
height:300px;
width:300px;
position:relative
}
/*Child Div */
.child{
background-color:red;
height:50px;
width:50px;
position:absolute;
margin:0;
top:50%;
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
</style>- Now create a container div with a class name parent and a child div with class name child and apply the above CSS properties. Now try to run this code by clicking on the Try it yourself button.
<head>
<style>
.parent{background-color:black;
height:300px;
width:300px;
position:relative}
.child{background-color:red;
height:50px;
width:50px;
position:absolute;
margin:0;
top:50%;
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element</div>
</div>
</body>
CSS Vertical Centering Using Flexbox
We can also use the CSS flex property to Vertically center an HTML element.
<style>
/*Container Div */
.parent{
background-color:black;
height:300px;
display:flex;
justify-content: center;
align-items:center;
}
/*Child Div */
.child{
background-color:red;
height:50px;
width:50px;
}
</style>- It is very simple to use the flex property to vertically center an HTML element. We just need to create a container div with a class name parent and a child div with class name child and apply the above CSS properties. Now try to run this code by clicking on the Try it yourself button.
<head>
<style>
/*Container Div */
.parent{
background-color:black;
height:300px;
display:flex;
justify-content: center;
align-items:center;}
/*Child Div */
.child{
background-color:red;
height:50px;
width:50px;}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element</div>
</div>
</body>
TAGS:
POPULAR POSTS
best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to create a login page using PHP an...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
What is HTML Text Formatting and how to ...
Tables HTML...
Dual boot windows 11 and android tv with...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
