CSS horizontal vertical center review summary

Time:2021-6-12

preface

After using material UI for a period of time, I seldom write native styles by myself. But HTML, CSS and JS are always the three foundations of the front end. This week, I suddenly thought of the CSS horizontal center scheme, because it is used too muchflexandmargin: autoIn retrospect, there are still several solutions to solve this problem. So I plan to review the old and learn the new, type the code again, and write this article as a note.

HTML code

<div class="parent">
  <div class="child"></div>
</div>

CSS code

.parent {
  width: 300px;
  height: 300px;
  background-color: blue;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
}

The following code is added based on the above code and will not be written repeatedly. The effect is to center the child element horizontally and vertically in the parent element
CSS horizontal vertical center review summary

1、 Flex layout

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

This is the most classic usage, but there is another way to write it

.parent {
    display: flex;
}
.child {
    align-self: center;
    margin: auto;
}

2、 Absolute + negative margin

This method is suitable for the case of knowing the fixed width and height.

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

3、 Absolute + transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4、 Absolute + margin Auto

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

5、 Absolute + calc

This method is suitable for the case of knowing the fixed width and height.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

6、 Text align + vertical align

.parent {
  text-align: center;
  line-height: 300px; /*  Height equal to parent*/
}
.child {
  display: inline-block;
  vertical-align: middle;
  line-height: initial; /*  In this way, the text in the child will not go beyond the bottom*/
}

7、 Table cell

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  display: inline-block;
}

8、 Grid

.parent {
  display: grid;
}
.child {
  align-self: center;
  justify-self: center;
}

9、 Writing mode

.parent {
  writing-mode: vertical-lr;
  text-align: center;
}
.child {
  writing-mode: horizontal-tb;
  display: inline-block;
  margin: 0 calc(50% - 50px);
}

Recommended Today

The use of springboot Ajax

Ajax overview What is Ajax? data Ajax application scenarios? project Commodity system. Evaluation system. Map system. ….. Ajax can only send and retrieve the necessary data to the server, and use JavaScript to process the response from the server on the client side. data But Ajax technology also has disadvantages, the biggest disadvantage is that […]