CSS | Centering Elements - GeeksforGeeks

07 Oct, 2021
Sometimes we face problems with centering an element in a web page. Is it really so hard? It is not too difficult to center an element. There so many different ways of doing it. One thing we need to know is that, which technique is for which purpose. Once you understand the problem, picking up the best technique will be much easier. So let us see some situation and discuss the best method to achieve the goal.  
Horizontally Inline elements We can easily center an inline element within a block level element like this: 
Inline elements We can easily center an inline element within a block level element like this: 
css
// Aligning text in center.center{     text-align: center;}
Block level elements We can center a block-level element by giving it margin-left and margin-right of auto (which has a known specified width):  
css
// Aligning an element of defined length in center// Remember to define the width of the element otherwise it//will be full width and 'auto' will not work.center{    margin: 0 auto;    width: 200px;}
More than one block level elements If we have two or more block-level elements that need to be centered horizontally in a row, it can be better served making them a different display type display: inline-block;  
css
.parent{  // Aligning the child of this parent in center  text-align: center;}.child{  // set the display of child elements  display: inline-block;  text-align: left;}
Vertically Inline elements We can easily center an inline element within a block level element like this:  
Inline elements We can easily center an inline element within a block level element like this:  
css
// Set the display of the parent class as table.parent{  display: table;  height: 250px;  background: white;  width: 240px;  margin: 20px;} // Set the display of the child class as table-cell.child{  display: table-cell;  margin: 0;  background: black;  color: white;  padding: 20px;  border: 10px solid white;  vertical-align: middle;}
Block level elements of known height We can easily center an inline element within a block level element like this:  
css
// Set the position of the parent as relative to other         .parent{  position: relative;} // Set position of the child as absolute in its parent class// so that it can be placed anywhere in the parent class.child{  position: absolute;  top: 50%;  height: 100px;   /* responsible for padding and border  if not using box-sizing: border-box; */  margin-top: -50px;}
Block level elements of unknown height We can easily center an inline element within a block level element like this:  
css
// Set position of child as absolute in its parent class          .parent{  position: relative;} // Set top of the child 50% of viewport// Translat the child by 50% of its height about     // negative y axis.child{  position: absolute;  top: 50%;  transform: translateY(-50%);}
Both Horizontally & Vertically Element with fixed height and width Using negative margins equal to half of that width and height, after you’ve absolutely positioned it at 50% / 50% will center it. 
Element with fixed height and width Using negative margins equal to half of that width and height, after you’ve absolutely positioned it at 50% / 50% will center it. 
css
// Set position of parent class as relative.parent{  position: relative;} // Set top and left of an element of// known height as 50%.child{  width: 300px;  height: 100px;  padding: 20px;   position: absolute;  top: 50%;  left: 50%;   margin: -70px 0 0 -170px;}
Element with unknown height and width When we don’t know the width or height, we can use the transform property and a negative translate of 50% in both directions to center: 
css
// Set position of parent as relative to other.parent{  position: relative;} // Set top and left of an element of// known height as 50%. Translate the// element 50% of its height and width // about negative x-axis and negative y-axis.child{  position: absolute;  top: 50%; //  left: 50%;  transform: translate(-50%, -50%);}
Note: The ‘.’ operator is used in CSS to identify a CSS class. In the above examples, the class parent is used to style the parent element and the class child is used for the child element.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Vijay Sirra
varshagumber28
CSS-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?