CSS | Centering Elements

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.

  1. Horizontally

    • Inline elements
      We can easily center an inline element within a block level element like this:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // Aligning text in center
      .center
      {
           text-align: center;
      }

      chevron_right

      
      

    • 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):

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // 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;
      }

      chevron_right

      
      

    • 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;

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      .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;
      }

      chevron_right

      
      

  2. Vertically
    • Inline elements
      We can easily center an inline element within a block level element like this:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // 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;
      }

      chevron_right

      
      

    • Block level elements of known height
      We can easily center an inline element within a block level element like this:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // Set the position of the parent as relaive 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
      }

      chevron_right

      
      

      Block level elements of unknown height
      We can easily center an inline element within a block level element like this:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // 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%);
      }

      chevron_right

      
      

  3. 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.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // 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;
      }

      chevron_right

      
      

    • 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:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // 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%);
      }

      chevron_right

      
      

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.



My Personal Notes arrow_drop_up

Worked as a full stack developer in three projects as well as a freelancer with 47/5 rating and 100% completion rate

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Vijay Sirra



Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.