[Different CSS] 8 ways to achieve vertical layout

If the other shore bustling fall, who accompany me to see the sunset fleeting years

Writing in the front

Your mastery of CSS layout determines how fast you can develop pages in Web development. As Web technology continues to evolve, the number of ways to implement various layouts is endless.

Recently, I put together a series of articles in about half a month using shred time. This series summarizes the various layouts in CSS, their implementation methods and common techniques. This article series will give you a new understanding of CSS layout.

The navigation posts of this series can be entered by me, which can quickly jump to the articles you want to know (recommended favorites)

Eight ways to achieve vertical layout

1. A single line of text is vertically centered

If the text is a single line, simply use line-height equal to the height of the parent element. The example code is as follows:

The HTML code

<div class="text">This is a test text that needs to be centered</div>
Copy the code

CSS code

.text {
  height: 200px;
  font-size: 3rem;
  font-weight: bold;
  background-color: #ff8787;
  text-align: center;
  /* To center text vertically, use a line-height equal to the element height */
  line-height: 200px;
}
Copy the code

The execution result is as follows:

2. The block-level elements in the row are vertically centered

If the element is an in-line block-level element, the basic idea is to use display: inline-block, vertical-align: middle for the child element and let the parent element have the same line height. The sample code looks like this:

The HTML code

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

CSS code

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* Set row height for parent container */
  line-height: 500px;
}
.child {
  width: 300px;
  height: 300px;
  /* Set the child elements to inline-block elements */
  display: inline-block;
  Vertical-align: middle; Implement centered */
  vertical-align: middle;
  background-color: #91a7ff;
}
Copy the code

The execution result is as follows

3. Use position + top + height + -margin to achieve vertical center

For the knowledge of positioning, you can see the in-depth understanding of position in the navigation post of this topic

top: 50%; Margin-top: half of the negative height; margin-top: half of the negative height

The HTML code

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

CSS code

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* Enable relative positioning for the parent container */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  top: 50%;
  /* margin-top: = 1/2 */
  margin-top: -150px;
}
Copy the code

The execution result is the same as above

4. Use position + top + bottom + height + margin to achieve vertical center

Top and bottom stretch the child elements to 100%, set the specified height, and pass margin:auto; You can achieve vertical center, the sample code is as follows:

The HTML code

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

CSS code

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* Enable relative positioning for the parent container */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  /* Vertical full */
  top: 0;
  bottom: 0;
  /* margin: auto */
  margin: auto;
}
Copy the code

The execution result is the same as above

5. Use Position + top + Transform to achieve vertical center

Through the top: 50%; And translateY(-50%).

The HTML code

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

CSS code

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* Enable relative positioning for the parent container */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Copy the code

The execution result is the same as above

6. Use the border-box + padding to achieve vertical center

The limitation of using this method is that the padding-top/bottom half of the remaining height can be achieved. I will not show the code here, but it is rarely used in development.

7. Use Flex to achieve vertical center

For detailed use of Flex layouts, please refer to the point I enter

Use Flex to achieve a very vertical center container, the specific code is as follows:

CSS code

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* Enable flex layout */
  display: flex;
  /* Method 1 */
  /* align-items: center; * /
}
.child {
  /* Method 2 */
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}
Copy the code

The HTML code and renderings are the same as above

8. Use Grid to achieve vertical center

For detailed usage of the Grid layout, please refer to the point I enter

It is also possible to create a center effect by turning on the Grid layout, but achieving just one center is overkill. The example code is as follows:

CSS code

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  display: grid;
  /* Method 1 */
  /* align-items: center; * /
  /* Method 2 */
  /* align-content: center; * /
}
.child {
  /* Method 3 */
  /* margin: auto; * /
  /* Method 4 */
  align-self: center;
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}
Copy the code

The HTML code and renderings are the same as above

It is important to note that the styles that should be applied to the mesh tolerances are only valid for the current mesh tolerances.

conclusion