Code section

Block-level elements

Note: Use width, height, border and background color as inline styles to make it easy to intuitively understand the CSS code that implements vertical and horizontal centers.

<div style="width:200px; height:200px; border:1px solid black" class="parent">
  <div style="width:100px; height:100px; background:red" class="child">The text</div>
</div>
Copy the code

Inline elements

Inline elements do not set width and height

<div style="width:200px; height:200px; border:1px solid black" class="parent">
  <span style="background:red" class="child">The text</span>
</div>
Copy the code

CSS code

* {
  box-sizing: border-box
}
Copy the code

Horizontal center

Inline elements

Single-line/multi-line text-align: center

.parent {
  text-align: center;
}
Copy the code

Effect:

Block-level elements

1. flex

.parent { 
  display: flex; 
  justify-content: center;
}
Copy the code

Effect:

2. margin: auto

.child {
  margin: auto; /* The box is horizontally centered */
}
Copy the code

Effect:

.child {
  text-align: center; /* The box is horizontally centered */
  margin: auto;
}
Copy the code

Effect:

3. Absolute positioning

You need to know the size of the child in advance, and absolute positioning is no longer recommended

(1) left: 50% + margin-left: – half of the width

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    margin-left: -50px; 
}
Copy the code

Left /right: 0 + margin: auto

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
Copy the code

(3) left: 50% + transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translate(-50%.0);
}
Copy the code

The renderings are as follows:

Vertical center

Inline elements

Single line

Word-break: break-all (height = height)

Mainly used for text typesetting, can also be used for image elements center

.child {
  line-height: 200px;
}
Copy the code

Effect:

Multi-line text

table-cell + inline-block + vertical-align: middle

<div style="width:200px; height:200px; border:1px solid black" class="parent">
  <span style="background:red" class="child">Multi-line text<br>Multi-line text<br>Multi-line text<br>Multiple lines</span>
</div>
Copy the code

.parent {
  display: table-cell;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}
Copy the code

Effect:

Block-level elements

1. flex

As long as you don’t consider compatibility with IE, Flex is a shuttle.

.parent {
  display: flex;
  align-items: center;
}
Copy the code

2. table-cell

.parent {
  display: table-cell;
  vertical-align: middle;
}
Copy the code

3. Absolute positioning

You need to know the size of the child in advance, and absolute positioning is no longer recommended

(1) margin-top: 50% + margin-top: – half of the height

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    margin-top: -50px;
}
Copy the code

Top /bottom: 0 + margin: auto

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
Copy the code

(3) Top: 50% + transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
Copy the code

The renderings are as follows:

4. The pseudo elements

:before, :after must both be written

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    vertical-align: middle;
}
.parent::before {
    content: ' ';
    height: 100%;
    display: inline-block;
    vertical-align: middle;            
}
.parent::after {
    content: ' ';
    height: 100%;
    display: inline-block;
    vertical-align: middle;            
}
Copy the code

Effect:

5. The table tag

Not recommended

<table class="parent">
  <tr>
    <td class="child">Text text text text text text text text text text</td>
  </tr>
</table>
Copy the code

.parent{
  border: 1px solid black;
  height: 200px;
  width: 200px;
}
.child{
  background: red
}
Copy the code

(Table tag has 2px space)

conclusion

The resources

• Summary of middle CSS Settings – Super complete
• Learn 16 ways to center CSS horizontally and vertically