Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Today I’m going to look at a problem that has been bothering me for a long time. In CSS, horizontal and vertical center can be written in several ways.

Margin: Auto

When the element is absolutely positioned, it will be positioned according to the nearest parent element, and using this feature, we have this method.

The CSS code:

 div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid # 000000;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
Copy the code

HTML code:

<div>
    <img src="avatar.jpg">
</div>
Copy the code

Effect:

Method 2: Flex elastic box method

In Flex, align-items: Center controls vertical center and justify-content: Center controls horizontal center.

The CSS code:

div{
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid # 000000;
}
img{}Copy the code

HTML code:

<div>
    <img src="avatar.jpg">
</div>
Copy the code

Effect:

Method three: margin: negative number method

I learned that margin can be negative only after I reported a class in Niuke. I had never tried it before.

In fact, the principle is similar to method 1, by the percentage of the image to the center of the container, and then align the center point on the line.

Remember that margin is negative and moves in that direction, for example margin-left:-100px; That’s 100px to the left. It is the opposite of normal adding margin which is open.

You can write a little demo to get the idea.

The CSS code:

div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid # 000000;
}
img{
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
}
Copy the code

HTML code:

<div>
    <img src="avatar.jpg">
</div>
Copy the code

Effect:

Method 4: Table-cell method

That’s a pretty old method, I haven’t written it that way. Is in baidu search results, after trying to write.

There is a problem, because according to the understanding, I think img should be in the middle if it is not added, but after I added it, I found in the browser debugging that it shifted upward some distance that could not be counted by the naked eye, and it disappeared after adding it in IMG. I don’t know why, I hope you can tell me.

The CSS code:

div{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    border: 1px solid # 000000;
}
img{
   vertical-align: middle;
}
Copy the code

HTML code:

<div>
    <img src="avatar.jpg">
</div>
Copy the code

Effect:

Translate (-50%,-50%)

The translate() function moves an element in a specified direction, and we can use it to do the same thing as method 3.

The CSS code:

 div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid # 000000;
}
img{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); 
}
Copy the code

HTML code:

<div>
    <img src="avatar.jpg">
</div>
Copy the code

Effect:

The last

Let me talk about my own feelings. There are five methods in total. I have used 1, 2, 3 and 5.

If I see anything else in the future, it will be recorded here.

Point a favor, we study progress together. ♥