Read the instructions before

The topic of this quick essay is horizontal vertical center.

Before reading this article, in order to save you time, you can first through the following introduction to understand the mouse interview quick questions series, if you feel that the series is not suitable for you or what is wrong, welcome to leave me a message.

Ratty’s interview quiz series is a series specifically aimed at various interview essays.

Want to do the original intention of this series, is that the mouse son himself is also a 22 session of fresh students, but also understand that many students around in the interview will be not clear on some knowledge points or simply read the full text recitation. In order to help consolidate his knowledge, and to help the students who are looking for jobs to do a little help, the rat decided to use his own understanding to chew the test points to everyone.

Who is this collection for?

  1. Those of you who are still at school, because ratty is also a student, you may use the words to get closer to your classmates.
  2. The seniors who have graduated but are looking for a job have limited abilities. I hope a little understanding can help the seniors to deepen their impression.
  3. Just want to be a memo of the bosses (if any), thank you for your love.

Finally, because the rat son ability is limited, many places may be controversial, hope you can put forward in time!

Q: Please use CSS to achieve horizontal and vertical center

Subject analysis

Being horizontally and vertically centered is a popular question in internships and college admissions, and everyone knows how to recite it, but how to show the interviewer that you are unique in a mundane question is where your strength lies.

The principles and code for each method will not be detailed in this article, so you can read the following article first

The CSS supports 1010 horizontal and vertical centering modes

There are 10 solutions, but I just want to pick out a few common ones for the interview.

I selected 5 implementation methods, which are Flex, Absolute + negative margin, Absolute + margin Auto, Absolute + CalC, absolute+ Transform

The DOM structure is as follows

<div id="container">
    <div id="box">
    </div>
</div>
Copy the code

The specific CSS code is as follows

  1. flex

    /* 1. flex */
#container {
    display:flex;
    justify-content:center;
    align-item:center;
}
Copy the code

  2. Absolute + negative margin

    /* 2. Absolute + negative margin */
#container {
    position:relative;
}
#box {
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    margin-left: -50px;
    height:100px;
    margin-top: -50px;
}
Copy the code

  3. absolute + margin auto

    /* 3. absolute + margin auto */
#container {
    position:relative;
}
#box {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100px;
    height:100px;
    margin:auto;
}
Copy the code

  4. absolute + calc

    /* 4.absolute + calc */
#container {
    position:relative;
}
#box {
    position:absolute;
    height:100px
    top:calc(50%-50px);
    width:100px;
    left:calc(50%-50px);     
}
Copy the code

  5. absolute + transform

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

Deepen the understanding

Let’s classify the above five implementations:

Good compatibility Poor compatibility The center element is fixed width and height The center element varies in width and height
flex Square root Square root
Absolute + negative margin Square root Square root
absolute + margin auto Square root Square root
absolute + calc Square root Square root
absolute + transform Square root Square root

Here the compatibility is good or bad, is relatively speaking, I will cSS3 new attributes as poor, CSS2 as good, in the actual business scenario support cSS3 environment has been very popular, don’t worry too much about this.

As for the fixed width and height of the center element, it is very important in real business scenarios, if you need to give the width and height in advance, it means that flexibility is greatly reduced.

Interview colloquial version

Interviewer: Please use CSS to achieve horizontal and vertical center

Mouse son answer:

First, a Flex layout can be implemented by specifying that the elements on its main and cross axes are arranged in a center.

You can also specify the names of the properties that control the spindles and cross axes: justify-content and align-items

Secondly, we can do this with absolute layout.

Give a relative layout to the parent box

To be more precise, let the parent box become a containing block. It can be mentioned or not, and it is suggested not to dig a hole

The child box is given an absolute layout with top=50% and left=50%. It is worth mentioning that this percentage is relative to the width and height of the parent box. At this time, the subbox is not fully centered, so we can give the subbox a negative margin-top and negative margin-left to pull it back to the center, and the size of the value is exactly half of the width and height of the subbox.

Here we can also use transform to pull. In the transform, there is a function of translate. We translate it by negative 50% on the x and y axes. Note that the percentage here is the width and height of the subbox.

If you want to do it with the calc function, you just have to give the formula for top and left, 50% minus half of the width and height of the subbox.

Of course, if the width and height of the subbox are given, I recommend using the format width and height formula.

This method is also mentioned in CSS World.

In this way, top, right, bottom and left are all set to 0, the width and height of the subbox are given, and margin is set to auto. In this way, margin will automatically allocate the remaining space, realizing vertical center. This is simple and compatible.

To prevent the interviewer from asking further questions about formatting width, we need to know its formula: width of parent box =left+right+ left margin/padding/border+ width of subbox, when margin is auto, all remaining space will be divided by margin. The same can be used to calculate the height

Keywords: Flex, Absolute, negative margin, transform, translate, calc, format width and height

Write in the last

The main content of this series is played by hand, it is inevitable that there will be omissions. Instead of trying to give the most comprehensive and perfect answer, we should focus on the points raised and spread them. Otherwise, we will give the impression of being rigid and just doing an endorsement. Knowledge is not isolated, and the knowledge behind each interview question is also interconnected. The key to the flexible application of the Eight-part essay is to radiate from a single interview question to a larger knowledge network.

If you want to see the mouse son analysis of other interview test points, welcome to leave a message!

About me

Like to chat, like to share, like the cutting-edge 22 side dish chicken, new to the hope to get your attention. Internships/college recruiting opportunities are even better! Personal public account: Rat son’s front end CodeLife