Pro Dev

Tags

Home

About Us!

Mail


FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 1139

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:






POST COMMENTS
No Comment

Please login to post comment




POSTS VIA CATEGORIES






DISCOVER MORE OF WHAT MATTERS TO YOU



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...
What is HTML Anchor Tag and Hyperlinks?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
Tables HTML...
CSS3 FUNCTIONS...
CSS3 FILTERS...
Do you know about HTML Lists and it's Ty...


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


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US



Help Privacy Terms About Contact




Recent Blogs




Pages

Sign Up
Login
About Us
Contact Us

Links

Pro Developers
Digital Card
Feedback
Terms & Conditions
Privacy Policy

Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



Privacy Policy· Terms & Conditions
© blog.theprodevelopers.com 2024. All Rights Reserved. Powered by Pro Developer