The Developer Brains


VERTICAL CENTERING

Web Designing | Web Development


SEE MORE














</CSS3 VERTICAL CENTERING>





Vertical centering is a method by using which we can align center to a child element of a HTML container element.


SEE MORE




















</CSS3 Vertical Centering>


CSS Vertical Centering

Verical centering is a process to center and HTML element vertically. We need to set parent div position as relative position and clild 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 above css properties. Now Try to run this code by click on 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>




Try it Yourself





CSS Vertical Centering Using Flexbox

We can also use CSS flex property to Verically 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 very simple to use 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 above css properties. Now Try to run this code by click on 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>




Try it Yourself























Verical centering is a process to center an HTML element vertically.
1. true
2. false




Check Now



CSS3 QUIZ







Next: Responsive_UI by Using CSS


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers