knowledge

  1. Absolute position+margin Computes the offset
  2. Transform Calculates the offset automatically
  3. margin:auto
  4. Text-algin and vertical-algin apply to inline elements

Horizontal center

1, fixed width +margin:auto

html:

<div id="test1P"> <div class="test1"> Horizontally centered, fixed width,margin set to auto, horizontally centered relative to parent </div> </div>Copy the code

css:

 .test1 {
        width: 200px;
        margin: auto;
        background-color: cadetblue;
      }
  #test1P {
    background-color: chartreuse;
  }
Copy the code

Effect:

2, text-algin+ display:inline-block(child element)

html:

<div id="test2P"> <span class="test2"> text-align:center, inline-block </span> </div>Copy the code

css:

#test2P {
        background-color: cadetblue;
        text-align: center;
      }
.test2 {
        background-color: chartreuse;
        display: inline-block;
        width: 200px;
        }
Copy the code

Effect:

[Summary] : Display can also be set to inline-block, text-algin will also be used for inline elements, but the width will be invalid. Without the display attribute:

Center vertically and horizontally

1. Fixed width and height + absolute positioning position+ offset calculation

html:

<div id="test4P"> <div class="test4"> Child element position: Absolute </div> </div>Copy the code

css:

#test4P {
        height: 150px;
        background-color: chartreuse;
        position: relative;
}
.test4 {
        position: absolute;
        width: 200px;
        height: 100px;
        background-color: cadetblue;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -100px;
       }
Copy the code

Effect:

2. Same as above, except that the offset relative to itself is calculated by transform

html:

<div class="test5"> <div class="test5"> Using the transform translation do offset, child element position: absolute, JHKKKBJJHFFGFSRHSTS < / div > < / div >Copy the code

css:

#test5P {
        background-color: cadetblue;
        position: relative;
        height: 300px;
      }
.test5 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: chartreuse;
       }
Copy the code

Effect:

【 summary 】 You can also use transform to adjust its offset, and it is more convenient than using margin.

3, vertical – align + inline – block + text – algin

html:

<div id="test6P"> <div class="test6"> Use vertical-align to center the parent elementCopy the code

css:

#test6P {
        height: 200px;
        text-align: center;
        background-color: chartreuse;
  }
  #test6P::before {
    content: "";
    height: 200px;
    display: inline-block;
    vertical-align: middle;
  }
  .test6 {
    width: 250px;
    height: 150px;
    display: inline-block;
    background-color: cadetblue;
    vertical-align: middle;
  }
Copy the code

Effect:

【 Summary 】 Vertical-algin only works on elements in the line, and aligns in the vertical direction, while text-algin works on the horizontal direction. When the two are combined, the horizontal and vertical center can be realized.

conclusion

For centered layouts, you can also use flex layouts or grid layouts, both of which use justyfy-Content and algin-items. Concrete implementation can understand the use of Flex and grid.