HTML structure

<div class="parent">
   <div class="child">child</div>
</div>

Copy the code

01 Inline elements (single line vertically centered) : Set line-height = height

Very common, mainly for text typesetting, but also for image elements center

.parent {
   height: 200px;
   line-height: 200px;
   border: 1px solid red;
}
Copy the code

02 block-level elements: display: flex

Pros: More flexible, simpler, and more maintainable. As long as you don’t consider IE, this is almost the best option.

Cons: If you’re still using Internet Explorer, the Flex layout doesn’t smell so good.

.parent { width: 600px; height: 200px; border: 1px solid red; display: flex; align-items: center; justify-content: center; /* horizontal center */}. Child {background: blue; }Copy the code

Margin: auto;

Advantages: do not need to know the size in advance, good compatibility

Cons: This method used to be one of my favorites, but absolut is no longer recommended. If you are still developing in IE, this method is recommended.

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}
Copy the code

04 Block-level elements: display: table-cell

Advantages: is also a better way to achieve, more concise

.parent {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
Copy the code

05 block level elements: Absolute positioning (need to know the size in advance)

Advantages: compatibility is good, also be a little skill.

Disadvantages: need to know the size of child in advance, margin-top: -(half height); Margin-left: -(half width); Absolute positioning is no longer recommended, especially on mobile devices.

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}
Copy the code

06 Block level elements: Absolute position + Transform

Advantages: No need to know the size in advance

Cons: Compatibility is just so-so

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}
Copy the code

07 block level elements: padding

Disadvantages: If the height is fixed, the dimensions need to be calculated in advance (only applicable in certain cases).

.parent {
    padding: 5% 0;
}
.child {
    padding: 10% 0;
    background: blue;
}
Copy the code

08 block level elements: pseudo elements

.parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.child {
    background: blue;
    width: 100px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.parent::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;            
}

Copy the code

09 Block level elements: calc()

That’s a good way to do it.

Disadvantages: Need to know the size of child, need to calculate, the same, if you are still using IE partners, not recommended.

.parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    background: blue;
    padding: -webkit-calc((100% - 100px) / 2);
    padding: -moz-calc((100% - 100px) / 2);
    padding: -ms-calc((100% - 100px) / 2);
    padding: calc((100% - 100px) / 2);
    background-clip: content-box;
}
Copy the code

Inline-block + vertical-align: middle;

<div class="parent">
    <div class="child">child</div>
    <div class="brother">brother</div>
</div>
Copy the code
.parent {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    position: relative;
}
.child..brother {
    display: inline-block;
    vertical-align: middle;
}
.child {
    background: blue;
    font-size: 12px;
}
.brother {
    height: 400px;
    font-size: 0;
}
Copy the code

conclusion

Display :flex (display:flex)

Need to consider IE 03(set 4 edges)