CSS can be vertically centered in eight ways

Requirements describe

Suppose we have the following initial code that requires content to be vertically centered in a Container.

<div class="container">
  <div class="content"></div>
</div>

.container {
  background-color: gray;
  height: 30rem; /* Height can be arbitrarily changed */
}
.content {
  background-color: wheat;
  height: 10rem;
  width: 10rem;
}
Copy the code

End result:

1. Usemargin: autoThe method of

Principle:

• Margin: Auto is often used to set the horizontal center. It automatically fills the available space for the element. But it doesn’t work for:

• When we set the available space for the vertical expansion of the element by using position: Absolute and top:0 bottom:0, the element automatically fills in the available size of the parent element.
• Code implementation:

.container {
  position: relative; /* Sets the parent element position to relative */
}
.content {
  position: absolute;
  top: 0; /* Set the four directions to position 0 */
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* Use margin: auto for vertical center */
}
Copy the code

2. Usetop: 50%;+translateY(-50%)

• How it works: This approach is relatively simple to implement, but only if no additional transform changes are required.

• Code implementation:

.container {
  position: relative; /* Sets the parent element position to relative */
}
.content {
  position: absolute;
  top: 50%; /* Sets the starting position of the child element to 50% perpendicular to the parent element */
  transform: translateY(-50%); /* Shift the height of the child element up by 50% */
  /* Transform: translate(-50%, -50%); left: 50% */
}
Copy the code

3. display: flex+margin: auto

• How it works: There are two axes in the Flex container by default: the main axis and the cross axis. The default spindle is the horizontal axis. By controlling how the child elements align the two axes. You can center it relatively easily. Set the parent element to the Flex container, plusmargin: autoTo center both horizontally and vertically. This method is arguably the simplest.
• Code implementation:

.container {
  display: flex; /* Set the parent element to flex container */
}
.content {
  margin: auto;
}
Copy the code

4. Set the parametersflexOf the containerjustify-contentandalign-itemsTwo properties to implement

• Principle: Two properties in a Flex layoutjustify-content: defines the alignment of elements on the main axis,align-items: defines the alignment of elements on the cross axis. By setting both alignments tocenterTo achieve center alignment
• Code implementation

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

5. Set the parametersflexNeutron elementalalign-selfattribute

• Principle:

In flex layout, you can define alignment separately by setting the align-self of the child elements. The difference between this and align-items is that it is defined on child elements and overrides the align-items property defined in the Flex container

• Code implementation

.container {
  display: flex; /* Set the parent element to flex container */
}
.content {
  align-self: center;
  margin: 0 auto; /* Implement horizontal center,flex layout does not support justify self */
}
Copy the code

6. gridLayout +margin:auto

• Principle grid layout, elements into rows and columns, is a two-dimensional layout. It is often used to implement the waterfall stream display pattern that is popular today. In terms of implementation centralization, it is similar to the flex layout implementation centralization. Verify the container first, and then set the alignment of the child elements using the corresponding attributes.

• Code implementation

.container {
  display: grid;
}
.content {
  margin: auto;
}
Copy the code

7. gridLayout, set up the containeralign-contentandjustify-items

• The rational-content property sets the horizontal position of the entire content area inside the container, and the align-content property sets the vertical position of the entire content area inside the container.

• Code implementation

.container {
  display: grid;
  align-items: center;
  justify-content: center;
}
Copy the code

8. gridThe alignment of child elements is set separately in the layout

• Code implementation

.container {
  display: grid;
}
.content {
  justify-self: center; /* Sets the child vertically centered */
  align-self: center; /* Sets the child horizontally centered */
}
Copy the code

Conclusion:

Whether vertically centered or horizontally centered, the point is:

• Identify a reference, for exampleposition:relativeA flex or Grid container, and even a table layout that we didn’t mention in this article
• Then center it according to the reference, one is throughMarin: autoTo automatically fill the available space. Or it can be centered by some property that controls alignment.