Three css methods to achieve DIV centering

This article mainly shares with you the method of realizing p centering in css. The css code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Let me share with you the implementation code of p centering. The specific code is as follows:

nbsp;html>

    
        <meta>
        <title>demo</title>
    
    
        <style>
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
        </style>
        <p>
            </p><p>
            </p>
        

    

For the two p above, the implementation of p2 inside p1 is Centered display

1. Method 1

Using margin, the width of p1 minus the width of p2 is the value of p2margin-left: (100-40)/2=30

The height of p1 minus the height of p2 is the value of p2margin-top: (100-40)/2=30

nbsp;html>

    
        <meta>
        <title>demo</title>
    
    
        <style>
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}

            .p22{
                margin-left: 30px;margin-top: 30px;
            }
        </style>
        <p>
            </p><p>
            </p>
        
    

2. Method 2

Using the position attribute of css, set the top and left of p2 relative to p1 to 50%, then use margin-top to set it to the negative half of the height of p2 to pull it back, and use margin-left to set it to the negative half of the width to pull it back. Come back, set the css as follows

nbsp;html>

    
        <meta>
        <title>demo</title>
    
    
        <style>
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
            .p11{
                position: relative;
            }
            .p22{
                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
            }
        </style>
        <p>
            </p><p>
            </p>
        
    

Three, method three

Still use the position attribute of css, as follows html

nbsp;html>

    
        <meta>
        <title>demo</title>
    
    
        <style>
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
            .p11{
                position: relative;
            }
            .p22{
                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
            }
        </style>
        <p>
            </p><p>
            </p>
        
    

4. Method 4

Using the new attribute table-cell of css3

nbsp;html>

    
        <meta>
        <title>demo</title>
    
    
        <style>
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
            .p11{
                display: table-cell;vertical-align: middle;
            }
            .p22{
                margin: auto;
            }
        </style>
        <p>
            </p><p>
            </p>
        
    

Another advantage of this method is that, The height of p2 does not need to be fixed, as follows

nbsp;html>

    
        <meta>
        <title>demo</title>
    
    
        <style>
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; background-color: green;}
            .p11{
                display: table-cell;vertical-align: middle;
            }
            .p22{
                margin: auto;
            }
        </style>
        <p>
            </p><p>
               p居中方法
            </p>
        
    

Related recommendations:

What should you pay attention to when centering a div in html

div centering: the most comprehensive summary of div centering methods

How to use CSS to center DIV

The above is the detailed content of Three css methods to achieve DIV centering. For more information, please follow other related articles on the PHP Chinese website!