@coder 470
CSS3 CENTERING
2021-11-16 18:36 · 4 min read
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.
<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;
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.
<head>
<style>
/*Container Div */
.parent{
background-color:black;
height:300px;
display:flex;
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>
CSS Vertical & Horizontal Centering Using Flexbox
We can use the CSS flex property to Vertically and Horizontally 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><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
what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...
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
