Premise: Set the child element to be centered horizontally and vertically within the parent element. The parent element is not an inline element unless specified. In practical development, don’t try to wrap a block element (including inline block elements) with inline elements, which can get confusing; inline elements should only be nested with inline elements or text (text is the equivalent of inline elements).

The element is horizontally centered

Scenario 1: Child elements are block elements

Method 1: The parent element is a block element, left and right margin Auto

Margin-left: auto; margin-left: auto; margin-left: auto; margin-left: auto; margin-right: auto; The child is horizontally centered in the parent.

.wrapper {
  display: block;
  background-color: red;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* The child is horizontally centered */
  margin-left: auto;
  margin-right: auto;
}
Copy the code

Method 2: The parent element is a table cell, left and right margin Auto

When the child element is a block element and the parent element is a table cell, you can also use the left and right margin Auto method to center the child element horizontally (same as method 1).

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent element becomes the table */
  display: table-cell;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  margin-left: auto;
  margin-right: auto;
}
Copy the code

Method 3: Set relative positioning of the parent element and absolute positioning of the child element

Method 3.1: Left + translateX

When the parent element is positioned relative to each other and the child element is positioned absolute, left: 50%; transform: translateX(-50%); Center the child element horizontally.

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Absolute positioning is centered at 50% level */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
Copy the code

Method 3.2: negative margin

Or use the negative margin method to center the child element horizontally. This method needs to calculate the value of negative margin, so the first method is more recommended.

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Absolute positioning uses negative margin horizontal center */
  position: absolute;
  left: 50%;
  margin-left: -50px;
}
Copy the code

Margin :auto + left0 right0

Margin :0; margin: 0; right:0; Implement horizontal centering of absolute positioning child elements.

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Absolute positioning using margin: auto horizontal center */
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
Copy the code

Scenario 2: Child elements are not block elements

Method 1: The parent element is a block element, text-align: center

If the child element is an inline block element (display: inline-block) or inline element (display: inline;) Text-align: center; text-align: center; text-align: center; The child is horizontally centered in the parent.

.wrapper {
  display: block;
  background-color: red;
  
  /* The block level child is horizontally centered */
  text-align: center; 
}

.son {
  display: inline-block; 
  width: 100px;
  height: 100px;
  background-color: green;
}
Copy the code

In particular, when the child element is an inline element, the parent element is set to text-align: center only if it is braced by content; To see the effect. If the parent element is a block element, the horizontal center method still works, but the width of the inline block element can be set. If the width is not set, the width defaults to the sum of the inline elements. So the above method only works if you set the width of the parent element of the inline block!

.wrapper {
  display: inline-block;
  background-color: red;
  
  /* If the parent is an inline block, the height must be set */
  width: 200px;
  text-align: center;
}

.son {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}
Copy the code

Method 2: The parent element is a table cell, text-align:center

If the parent element is a table cell and the child element is an inline element (including an inline block element), then you need to set the parent element text-align:center to achieve horizontal center of the child element (same as method 1).

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent element becomes the table */
  display: table-cell;
  
  /* The child element is inline-block/inline case */
  text-align:center;
}

.son {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}
Copy the code

Scenario 3: Child element float

If a child element is set to float, then we know that if the parent element is not set to height, the height will become 0, i.e. height collapse, and the child element’s width is stretched by the content i.e. it is equivalent to an inline block element. If we need to center the child element horizontally and vertically in the parent element when the parent element and child element are both set with width and height, then we can make the child element relatively positioned and set the child element horizontally centered, using the same method as scenario 1 method 3. The code is as follows:

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* The child elements are positioned relative to each other, and then horizontally centered
  float:left;
  position:relative;
  left: 50%;
  transform: translateX(-50%);
}
Copy the code

Gimbalm: Set parent element to elastic box, context-content: center

If the parent element is an elastic box (display: flex), just set context-content: center; , all of its inner child elements will be horizontally centered as a whole. In addition, you’ll magically discover that if you make the parent elastic box, the child will become inline block anyway, even if you force it to be inline.

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent becomes an elastic box */
  display: flex;
  
  /* All child elements as a whole are horizontally centered */
  justify-content: center;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
}
Copy the code

The element is vertically centered

Scenario 1: Child elements are block elements

Margin auto (); margin auto (); margin auto ()

We know that horizontal centering can be achieved by setting left and right margin Auto for block elements, but vertical centering cannot be achieved by setting upper and lower margin Auto (see: Margin: auto why horizontal centering can only be achieved but vertical centering cannot be achieved). When the parent element is a table cell (display: table-cell;) Margin Auto and parent vertical-align: middle; You can also center child elements vertically!

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent element becomes the table */
  display: table-cell;
  vertical-align: middle;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Set margin Auto to vertical center */
  margin-top: auto;
  margin-bottom: auto;
}
Copy the code

Method 2: The parent element is positioned relative, and the child element is positioned absolute

Same as setting horizontal centering for absolute positioning of child elements above, we can still use transform or negative margin or upper and lower margin Auto to realize vertical centering of child elements.

Method 2.1: Top + translateY

.wrapper { display: block; background-color: red; width: 200px; height: 200px; position: relative; } .son { display: block; background-color: green; width: 100px; height: 100px; /* Position: absolute; top: 50%; transform: translateY(-50%); }Copy the code

Method 2.2: negative margin

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Absolute positioning uses negative margin vertical center */
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
Copy the code

Method 2.3: Margin auto + top0 bottom0

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Absolute positioning using margin: auto vertical center */
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
Copy the code

Scenario 2: Child elements are inline elements (single lines of text)

Method 1: The parent element has the same row height and height

In all three scenarios, the child element is a block element or an inline block element. But if the child element is inline and you want to center it vertically in a block element, you simply keep the line height and height of the parent element the same.

.wrapper {
  display: block;
  background-color: red;
  height: 200px;
  line-height: 200px;
}

.son {
  display: inline;
  background-color: green;
}
Copy the code

Method 2: Equal padding

Or you can add a padding of equal size to the parent element to center the inline element vertically, but this way you can’t set the height of the parent element, you need to have the parent element spread out by the height of the inner inline element.

.wrapper {
  display: block;
  background-color: red;
  padding-top: 100px;
  padding-bottom: 100px;
}

.son {
  display: inline;
  background-color: green;
}
Copy the code

Scenario 3: Child element float

Similar to the horizontal centering method of floating child elements, if you want to center a floating child element vertically in the parent element, you also need to make the child element relatively positioned, and then set the vertical centering. The method is the same as method 2 of Scenario 1, and the code is as follows:

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* The child elements are positioned relative to each other, and then vertically centered */
  float:left;
  position:relative;
  top: 50%;
  transform: translateY(-50%);
}
Copy the code

Balm: Set parent element to elastic box, align-items: Center

If the parent element is an elastic box, just set align-items: center; , all the inner child elements will be vertically centered as a whole.

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent becomes an elastic box */
  display: flex;
  
  /* All child elements as a whole are vertically centered */
  align-items: center;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
}
Copy the code

The child element is centered horizontally and vertically

Given the above, it is easy to combine the following ways to center child elements horizontally and vertically:

Method 1: Parent + top 50% + left 50% + translate -50%

Combining translateX and translateY, we can get the following horizontal and vertical center method:

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
  
  position: relative;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Absolute positioning uses translate 50% to center horizontal and vertical */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Method 2: Sub-phase + Top 50% + left 50% + translate -50%

Similar to method 1, if the child element is positioned relative rather than absolute, you can use the same method to set the horizontal and vertical center.

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Horizontal and vertical center with translate 50% */
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Method 3: Parent element table cell + Margin Auto

If the parent element is a table, we can also achieve horizontal and vertical centering by:

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent element becomes the table */
  display: table-cell;
  vertical-align: middle;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Set margin Auto to horizontal and vertical center */
  margin: auto;
}
Copy the code

In particular, if the child element is an inline block or inline element, the parent element needs to be text-align:center to achieve horizontal and vertical center.

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent element becomes the table */
  display: table-cell;
  vertical-align: middle;
  
  /* Compatible child elements are inline-block/inline cases */
  text-align:center;
}

.son {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}
Copy the code

Method 4: Child elements are centered on floating elements

If a child element is set to float, then we know that if the parent element is not set to height, the height will become 0, i.e. height collapse, and the child element’s width is stretched by the content i.e. it is equivalent to an inline block element. If the parent element and the child element are set to width and height, and we need to center the child element horizontally and vertically in the parent element, we can center the child element horizontally and vertically in the relative position, as follows:

.wrapper {
  display: block;
  background-color: red;
  width: 200px;
  height: 200px;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
  
  /* Set the relative positioning of the child elements, and then set the horizontal and vertical center */
  float:left;
  position:relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  Margin-top: -50px; margin-top: -50px; margin-left:-50px; * /
}
Copy the code

Method 5 (Balm) : Flex layout

The parent element is set to an elastic box and context-content: center; align-items: center; The child elements can be centered horizontally and vertically at the same time.

.wrapper {
  background-color: red;
  width: 200px;
  height: 200px;
  
  /* The parent becomes an elastic box */
  display: flex;
  
 /* All child elements as a whole are horizontally and vertically centered */
  justify-content: center;
  align-items: center;
}

.son {
  display: block;
  background-color: green;
  width: 100px;
  height: 100px;
}
Copy the code

The resources

1. Methods of centralizing CSS child elements horizontally and vertically within a parent element
2. CSS- Horizontal center, vertical center, and horizontal vertical center
3. Horizontal center, vertical center, horizontal vertical center, floating center, absolute positioning center……. Help you seal the deal