About the layout

Left and right layout of multiple elements

1. Use floats

Add the property float: left to all child elements that need a left and right layout

Note: The parent element of a floating element is cleared by the ClearFix class.

.clearfix::after {
  content: ' ';
  display: block;
  clear: both;
}
Copy the code

2. Use absolute positioning

Child element: position: Absolute, using the left attribute to adjust the position,

Parent element: position: relative

3. Use Flex layout

Centered layout

Center the inline elements

Parent element: text-align: center

Vertically centered: Parent element: dispaly: table-cell; vertical-align: middle;

The center of a single block-level element

For block-level elements, consider whether the height and width of the parent and child elements are determined.

The parent element is of uncertain width and height

Horizontal center: When the width of the parent element is not set, it fills the width of the parent element, so it can be considered determined.

  • If the child element width is specified, the child element is setLeft and right margin: auto.
  • If the child element width is uncertain, set the child elementLeft and right margin: same value.
  • For other methods, see below when the parent element width is determined.

Vertical center: Set the upper and lower padding of the parent element to the same value so that the child element is centered. (This method is also recommended when writing styles. Do not set the height of the parent element, which is convenient and less likely to cause problems.)

Parent element width and height determined

1. Absolute positioning + negative displacement

This method can be centered horizontally or vertically.

  • First, the child element is absolutely positioned, and top and left are set to half the width of the parent element: top: -50%.

    The top left vertex of the child element is already in the center of the parent element. Move the child element up and to the left by half of its width.

  • Then set the child elements: transform: translate(-50%, -50%).

  • You can also use the margin attribute if you want to determine the width and height of the child element. (Since the margin percentage value is relative to the parent element, you cannot use percentages.)

    • If the child element width and height is 40px:Margin - left: - 20 px; Margin - top: - 20 px.
.fa {
  position: relative; 
  width: 100px; 
  height: 100px; 
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); } // Make sure the width and height can be usedmargin
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px; 
  height: 40px;
  margin-left: -20px; 
  margin-top: -20px;
}

Copy the code

2, left margin: auto

Margin: auto;

This method only works if the width child is horizontally centered. Fills the parent element width when the element width is not set. Vertical center does not work.

3. Left and right margin: same value

Set the same values for the left and right margins of the child element.

It applies to the horizontal center of the child element of uncertain width and affects the width of the child element itself.

Margin: auto + absolute positioning 0

Child elements:

.son {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
Copy the code

For determining the width, height of the element vertical, horizontal center. If the element width is not set, it fills the parent element width. If the height is not set, vertical center does not work.

Multiple block-level elements are centered

Change block level elements to inline elements:

.fa {
  text-align: center; // Horizontal centerdisplay: table-cell; // Vertical centervertical-align: middle; // Vertical center}.son {
  display: inline-block; // Change all child elements to inline elements}Copy the code

This method also works for individual child elements.

2. Use Flex layout.

.fa {
  display: flex;
  justify-content: center;
  align-items: center;
}
Copy the code

The Flex layout is fine for all other cases.