This is the NTH day of my participation in the August Challenge. for more details, see: August Challengehas been more than one day

  • Realized effect:
  • Method 1 :(using the positioning method, the child must have the parent phase 1)
  • Method 2 :(using the positioning method, the child must have the parent phase 2)
  • Method 3 :(use the positioning mode child must parent phase 3- box width and height are not specified)
  • Method 4 :(use flex layout (elastic layout))

HTML: the public part

<! -- parent element --> 
    <div class="f">
        <! -- child element -->
        <div class="s">
        </div>
    </div>
Copy the code

Method 1 :(using the positioning method, the child must have the parent phase 1)

 .f {
    /* The son is not the father */
    position: relative;
    height: 500px;
    width: 500px;
    background-color: pink;
    margin: 100px auto;
    }
        
.s {
    /* The son is not the father */
    position: absolute;
    height: 200px;
    width: 200px;
    background-color: red;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Copy the code

Set the left and right attributes to 0 and the margin attribute to auto to achieve the center effect

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Method 2 :(using the positioning method, the child must have the parent phase 2)

 .f {
    /* The son is not the father */
    position: relative;
    height: 500px;
    width: 500px;
    background-color: pink;
    margin: 100px auto;
}
.s {
   /* The son is not the father */
    position: absolute;
    height: 200px;
    width: 200px;
    background-color: red;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

Copy the code

This method also mainly uses the characteristic of “the child has no parent phase”, which is different from the first “child” which cleverly uses half of its own width and height to center

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — – line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Method 3 :(use the positioning mode child must parent phase 3- box width and height are not specified)

In view of the second method above, some partners will think, but also calculate their own height, very troublesome, I can only calculate 10 of the addition and subtraction, it doesn’t matter we can use displacement to solve this calculation problem, quick to try!

 .f {
    /* The son is not the father */
    position: relative;
    height: 500px;
    width: 500px;
    background-color: pink;
    margin: 100px auto;
}
 .s {
     position: absolute; // The width and height of the box are not specified. // The width and height of the box are not specifiedheight: 200px;
    width: 200px;
    background-color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Copy the code

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — – line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Method 4 :(use flex layout (elastic layout))

.f {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 500px;
     width: 500px;
     background-color: pink;
     margin: 100px auto;
 }
.s {
     height: 200px;
     width: 200px;
     background-color: red;
 }

Copy the code

This method is also a more convenient one, clever use of elastic box, justify-content: center; Align -items: center; The lateral axis is centered, which creates a vertical horizontal center effect.

To be continued, I will update you as there is a better way, welcome to comment