How to use positioning to center elements (web page layout tips)

Time:2021-5-9

How to center elements in browser window

Here is the code block, if there are students who have seen something, you can try it yourself.

position:fixed;   /* Set the value for the element you want to center*/
 left:50%;  /* perhaps right:50% */
 top:50%;  /* perhaps bottom:50% */
 margin- left:- Half the width of the element/* Or margin right*/
 margin- top:- Half of the height of the element/* Or margin bottom*/

OK, let’s have a try next!

<head>
    <meta charset="UTF-8">
    <style>
    /*Box is centered in the browser window, not the whole page, so when you slide the page up and down,
    The box element is fixed, so set a box here_ The compare element acts as a reference to make it high
    When the window height is exceeded, scroll bar will appear on the page*/
        .box_compare {
            width: 100%;
            height: 1000px;
            background: skyblue;
        }
        
        .box {
         /*Set the width and height of the element*/
            width: 500px; 
            height: 300px;
            background: blue;
            position: fixed;
            left: 50%; /* The leftmost distance of the element is 50% to the left of the window*/
            top: 50%; /* The top edge of the element is 50% away from the top edge of the window*/
            margin-top: -150px;
            margin-left: -250px;
        }
    </style>
</head>

<body>
    <div class="box_compare"></div>
    <div class="box"></div>
</body>

In fact, the above method has a disadvantage, that is, it cannot be used when the width of the element is not set. The width of the element that is not set after the positioning is added is supported by the content. Therefore, this method cannot be used. Let’s provide a simpler method.

position: fixed; /* Set the value for the element you want to center*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

Some students may not understand this method. Why is it left: 0; right: 0; Top: 0 again; bottom: 0;, The purpose is to make it a free element. When the width and height of the element are not set, the default is the width and height of the parent element, and then use margin: Auto; You can center it in the browser window, otherwise, the fixed element is added and margin: Auto is used; It is invalid.
OK, let’s try again.

<head>
<meta charset="UTF-8">
 <style>
  /*box_ Compare is the same as above*/
     .box_compare {
        width: 100%;
           height: 1000px;
           background: skyblue;
     }
     .box {
           width: 60%;
           height: 300px;
           background: blue;
           position: fixed;
           left: 0;right: 0;
           top: 0;bottom: 0;
           margin: auto;
      }
     </style>
</head>
<body>
     <div class="box_compare"></div>
     <div class="box"></div>
</body>

The above method is widely used in writing web pages, students should practice more! After learning how to center an element in the browser window, how to center an element in the parent element? Students can think about it by themselves, and I’ll introduce it to you next time!

This article about how to use positioning to center elements (web page layout tips) is introduced here. For more related page positioning to center elements, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!