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

The "3I" Standards for Successful Print Advertising

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

The "3I" Standards for Successful Print Advertising

CSS3 realizes bouncing ball animation

Linux forced release of occupied ports and Linux firewall port opening method detailed explanation

JavaScript implements three common web effects (offset, client, scroll series)

React realizes secondary linkage (left and right linkage)

Docker binding fixed IP/cross-host container mutual access operation

CSS animation combined with SVG to create energy flow effect

Mini Program natively implements left-slide drawer menu

How to add links to FLASH in HTML and make it compatible with all major browsers

Deleting files with spaces in Linux (not directories)

Recommend

How to install MySQL 8.0.17 and configure remote access

Detailed explanation of using the at command for one-time scheduled tasks in Linux

I have sorted out some domestic design websites that I think are good.

Detailed explanation of how to manually deploy a remote MySQL database in Linux

HTTP Status Codes

HTML uses canvas to implement bullet screen function

Detailed process of installing Jenkins-2.249.3-1.1 with Docker

Mysql5.7 my.ini file loading path and data location modification method under windows7

How to read the regional information of IP using Nginx and GeoIP module

Summary of some problems encountered when integrating echarts with vue.js

Advanced crawler - Use of Scrapy_splash component for JS automatic rendering

Solve the problem of missing msvcr100.dll file when building mysql in windows service 2012 Alibaba Cloud server

Essential Handbook for Web Design 216 Web Safe Colors

Share 20 JavaScript one-line codes

Should nullable fields in MySQL be set to NULL or NOT NULL?