First, parent-child elements are highly determined

Simple and crude, center directly by setting the appropriate padding or margin

<style>
  .p {
    padding: 20px 0;
    background: rgba(255.0.0.0.1);
  }

  .c {
    width: 40px;
    height: 20px;
    background: blue;
  }
</style>
<div class="p">
  <div class="c"></div>
</div>
Copy the code

Two, Flex layout

<style>
  .p {
    height: 100px;
    background: rgba(255.0.0.0.1);

    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
  }

  .c {
    width: 40px;
    height: 20px;
    background: blue;
  }
</style>
<div class="p">
  <div class="c"></div>
</div>
Copy the code

The layout of the Grid

<style>
  .p {
    height: 100px;
    background: rgba(255.0.0.0.1);
  
    display: grid;
    place-items: center; /* Directly horizontally and vertically centered */
  }

  .c {
    width: 40px;
    height: 20px;
    background: blue;
  }
</style>
<div class="p">
  <div class="c"></div>
</div>
Copy the code

Fourth, the child element is centered by “absolute positioning + offset”

4.1 The child element height is not fixedtransformTo offset

Basis: The absolute positioning percentage is calculated relative to the parent element, while the transform percentage is calculated relative to itself

<style>
  .p {
    height: 100px;
    background: rgba(255.0.0.0.1);
    position: relative;
  }

  .c {
    width: 40px;
    background: blue;

    top: 50%;
    position: absolute;
    transform: translateY(-50%);
  }
</style>
<div class="p">
  <div class="c">
    1111<br>2222
  </div>
</div>
Copy the code

4.2 Child element height fixed, directly usedmarginTo offset

Basis: Absolute positioning percentage, which is calculated relative to the parent element

<style>
  .p {
    height: 100px;
    background: rgba(255.0.0.0.1);
    position: relative;
  }

  .c {
    width: 40px;
    height: 40px;
    background: blue;

    position: absolute;
    top: 50%; /* The percentage, calculated relative to the height of the parent element */
    margin-top: -20px; /* Manually calculated, equal to half of the height */
  }
</style>
<div class="p">
  <div class="c"></div>
</div>
Copy the code

4.3 “Supplement”margin,paddingPercentage calculation method

The percentage of margin and padding is calculated relative to the adaptive side of the parent element. By default, it is calculated according to the width of the parent element (because the block element defaults to the adaptive width). The reason why it is calculated relative to the adaptive side is to avoid the situation that the width and height are not set. The child element sets the margin, causing the container size to change, resulting in percentage recalculation, causing an infinite loop

<style>
  .p {
    width: 200px;
    height: 400px;
    background: rgba(255.0.0.0.1);
  }

  .c {
    margin: 10%;  /* Top, bottom, left, and right margins, relative to the parent element width: 20px */
    padding: 10%; /* Top, bottom, left, and right margins, relative to the parent element width: 20px */
    display: inline-block;
    background: blue;
  }
</style>
<div class="p">
  <div class="c">
    
  </div>
</div>
Copy the code

By using writing-mode: vertical-LR, element content (text, child elements) can flow vertically from top to bottom, and the element will change from width adaptive to height adaptive. Then the paddin margin percentage of the child element will be calculated relative to the height of the parent element

<style>
  .p {
    writing-mode: vertical-lr; /* Element content flows vertically from top to bottom, and the height is adaptive */
    width: 200px;
    height: 400px;
    background: rgba(255.0.0.0.1);
  }

  .c {
    margin: 10%;  /* Top, bottom, left, and right margins, relative to the parent element width: 40px */
    padding: 10%; /* Top, bottom, left, and right margins, relative to the parent element width: 40px */
    display: inline-block;
    background: blue;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
Copy the code

Five, adaptive characteristics +margin: auto

As we all know, margin: auto can realize horizontal centering of elements for containers. The reason why it can realize horizontal centering is that the parent element width is self-adaptive. Only in this case, margin: Auto can correctly calculate the appropriate value

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255.0.0.0.1);
  }

  .c {
    width: 40px;
    height: 40px;
    background: blue;
    margin: auto;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
Copy the code

From the above example, it can be seen that margin: Auto can achieve horizontal centering because the parent element width is adaptive, so it is natural to think that if the parent element height can be adaptive, then we can use Margin: Auto to achieve vertical centering

5.1 throughwriting-modeMake elements highly adaptive

The writing-mode attribute defines the horizontal or vertical arrangement of element content (text, child elements), where the value of the vertical-LR attribute changes the content from horizontal to vertical flow, and the width adaptation of the element changes to height adaptation

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255.0.0.0.1);

    writing-mode: vertical-lr; /* Change the direction of the child element from horizontal to vertical, and the width adaptation will also change to height adaptation */
  }

  .c {
    width: 40px;
    height: 40px;
    background: blue;
    margin: auto;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
Copy the code

5.2 Absolute positioning is set for child elements, so that they have adaptive characteristics in the corresponding direction

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255.0.0.0.1);

    position: relative;
  }

  .c {
    width: 40px; /* Need to set the width */
    height: 40px; /* Need to set the height */
    background: blue;
    
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
Copy the code

Vi. Child elements are text or inline elements (including inline block elements)

6.1 line-heightA poker

For height determination of the parent element, if the child element is a single line of text or an inline element, it can be centered directly with line-height

<style>
  .p {
    line-height: 80px;
    background: rgba(255.0.0.0.1);
  }

  .inline-block {
    display: inline-block;
    height: 20px;
    width: 40px;
    background: blue;
  }
</style>
<div class="p">
  11111111111111111111
</div>
<br/>
<div class="p">
  <div class="inline-block"></div>
</div>
Copy the code

6.2 Pseudo-elements (::after) + vertical-align

Create a hidden inline element with the height of the parent element through the pseudo-class, and use vertical-align to center everything vertically

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255.0.0.0.1);
  }
  .p::after {
    content: ' ';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  .c {
    width: 40px; /* Need to set the width */
    height: 40px; /* Need to set the height */
    background: blue;
    display: inline-block;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
<br>
<div class="p">
  111111111111111111111
</div>
Copy the code

6.3 display: table-cell + vertical-align

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255.0.0.0.1);
    display: table-cell;
    vertical-align: middle;
  }

  .c {
    width: 40px; /* Need to set the width */
    height: 40px; /* Need to set the height */
    background: blue;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
<br>
<div class="p">
  111111111111111111111
</div>
Copy the code