Home  >  Article  >  Web Front-end  >  Three css methods to achieve DIV centering

Three css methods to achieve DIV centering

小云云
小云云Original
2018-02-02 11:16:342600browse

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:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .p1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .p2{ width:40px ; height: 40px; background-color: green;}
        </style>
        <p class="p1">
            <p class="p2">
            </p>
        </p>

    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .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 class="p1">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .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 class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

Three, method three

Still use the position attribute of css, as follows html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .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 class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

4. Method 4

Using the new attribute table-cell of css3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .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 class="p1 p11">
            <p class="p2 p22">
            </p>
        </p>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .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 class="p1 p11">
            <p class="p2 p22">
               p居中方法
            </p>
        </p>
    </body>
</html>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn