Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

Train of thought

“Horizontal vertical center”, a platitude topic, in the interview is also very frequent. In fact, it is very simple, do not think of all of a sudden to achieve horizontal vertical center, split the problem into “horizontal center” + “vertical center”, from two directions to achieve much easier.

Inline elements are simple, text-align: center horizontally and line-height vertically. Today we’ll focus on block-level elements.

methods

Simple sorting, commonly used are as follows:

  1. absolute + margin
  2. absolute + calc
  3. absolute + transform
  4. Change industry elements
  5. table-cell
  6. flex
  7. grid

implementation

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> < span style> .container { width: 300px; height: 300px; background: #ccc; } .box{ width: 100px; height: 100px; background: #ff7433; } </style> <body> <div class="container"> <div class="box"></div> </div> </body> </html>Copy the code

absolute + margin

Method 1:

.container {
    position: relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
Copy the code

Method 2:

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

absolute + calc

.container {
    position: relative;
}
.box {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
Copy the code

absolute + transform

.container {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

Change industry elements

.container {
    text-align: center;
    line-height: 300px;
}
.box {
    display: inline-block;
    vertical-align: middle;
}
Copy the code

table-cell

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}
Copy the code

flex

Method 1:

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

Method 2:

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

grid

Method 1:

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

Method 2:

.container {
    display: grid;
}
.box {
    justify-self: center;
    align-self: center;
}
Copy the code

Method 3:

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

Method 4:

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

The results of

conclusion

There are a variety of ways to achieve this, which may not impress you, but may get twice the result with half the effort.

Questions like this, the interviewer may focus on not only how to achieve horizontal and vertical center, which implementation is the most important thing to examine, not only to see if you can achieve this requirement, but also to see how proficient you are in CSS. Probably 90% of the people who come to the interview can answer three, and you can answer six, seven, and that definitely gives you a lot of points.

Therefore, we should pay attention to thinking, summarizing and trying more at ordinary times. The same problem, we try to use different methods to achieve, to solve. The problem is not important, the method and thinking are important.