Make writing a habit together! This is the sixth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Antecedents feed

  • The main HTML layout is as follows:
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
Copy the code
  • Fixed and variable width heights refer to the width heights of the child elements, namely the div in the DOM element whose class is box
  • Essential knowledge
    • Relative positioning: the movement of position relative to oneself. It will not leave the document flow, and the original location will be empty.
    • Absolute positioning: If none of the parent elements are positioned, then absolute positioning is done relative to the body. Any parent of each level has an absolute position relative to it. If multiple parents have location information, the proximity rule is adopted. It is removed from the document flow and its place is occupied by other elements.
  • Methods:
    1. Absolute position + negative magin value
    2. Absolute positioning + margin
    3. Absolute position + Transform
    4. flex
    5. grid
    6. table-cell + vertical-align + inline-block
    7. Flex variable

Absolute position + negative magin value

.box {
    height: 200px;
    width: 200px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}
Copy the code

As shown in figure:

Absolute positioning + margin

.box {
    height: 200px; 
    width: 200px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    background-color: yellow;
}
Copy the code

As shown in figure:

Absolute position + Transform

  • At this point, both fixed width and variable width can be used
.box{ 
    height: 200px; 
    width: 200px; 
    background-color: yellow; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}
Copy the code

As shown in figure:

flex

  • Width and no width are the same; a Flex parent element must have height
.container{ 
    height: 500px; 
    width: 500px; 
    background-color: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.box{ 
    height: 200px; 
    width: 200px; 
    background-color: red; 
}
Copy the code

As shown in figure:

grid

  • The parent element of a grid must be wide and tall
.container{ 
    height: 500px; 
    width: 500px; 
    background-color: yellow; 
    display: grid; 
} 
.box{ 
    width: 50px; // If there is nothing on the page with no content inside the element, then temporarily specify the width and height instead of contentheight: 50px; // If there is nothing on the page with no content inside the element, then temporarily specify the width and height instead of contentbackground-color: red; 
    margin: auto; 
}
Copy the code

As shown in figure:

table-cell + vertical-align + inline-block

  • Table -cell + vertical-align + set the table-cell + vertical-align + to inline-block. Set margin: auto to have a width and height
.container{ 
    height: 500px; 
    width: 500px; 
    background-color: yellow; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
.box{ 
    height: 200px; 
    width: 200px; 
    background-color: red; 
    /* margin: auto; * /
    display: inline-block; 
}
Copy the code

As shown in figure:

Flex variable

  • Fixed width height variable width height can be
.container{ 
    height: 500px; 
    width: 500px; 
    background-color: yellow; 
    display: flex; 
} 
.box{ 
    /* height: 200px; * / 
    /* width: 200px; * /
    background-color: red; 
    margin: auto; 
}
Copy the code

As shown in figure: