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

How to center an element in the browser window

Here is the code block first. If any students have already figured it out, they can try it themselves first.

 position:fixed; /*Set the element you want to center*/
 left:50%; /*or right:50%*/
 top:50%; /*or bottom:50%*/
 margin-left:-half the width of the element; /*or margin-right*/
 margin-top:-half of the element height; /*or margin-bottom*/

Okay, let’s give it a try next!

<head>
    <meta charset="UTF-8">
    <style>
    /*The box is centered in the browser window, not the entire page, so that when you slide the page up and down,
    The box element is immovable, so a box_compare element is set here to serve as a reference, making its height exceed the window height, so that a scroll bar appears 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 edge of the element is 50% of the distance from the left side of the window*/
            top: 50%; /*The top edge of the element is 50% of the distance from the top of the window*/
            margin-top: -150px;
            margin-left: -250px;
        }
    </style>
</head>

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

The above method actually has a drawback, that is, it cannot be used when the width of the element is not set. After adding the positioning element, the width of the element without setting the width is stretched by the content, so this method cannot be used. Here is a simpler method for everyone.

position: fixed; /*Set 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 left: 0; right: 0; and top: 0; bottom: 0;. The purpose is to turn it into a free element. At this time, the width and height of the element are the same as the parent element by default when they are not set. Then use margin: auto; to center it in the browser window. Otherwise, it is invalid to use margin: auto; on an element with fixed.
Okay, let's try it again.

<head>
<meta charset="UTF-8">
 <style>
  /*box_compare has the same comparison function 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 when writing web pages. Students should practice more! Now that you have learned how to center an element in the browser window, how do you center an element within its parent element? Students can think about it on their own, and I will introduce it to you in the next issue!

This concludes this article on how to use positioning to center elements (web page layout tips). For more content on page positioning to center elements, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Simple usage example of MySQL 8.0 recursive query

>>: Vue implements accordion effect