Css notes: how to place a div in the center of the page, cssdiv

Css notes: how to place a div in the center of the page, cssdiv

How to place a div in the middle of the page? What I am talking about today is to align a div horizontally and vertically, instead of simply top: 50%, left: 50%. Of course, let's take a look at the first thought: the top and left attributes are set to 50% to see the effect.

<! DOCTYPE html> 

I can see that the Left vertex of the div is at the center of the page. The current idea is how to move the div and overlap the center of the div with the center of the page to achieve the expected results at the beginning. Here I want to introduce a method that uses the transform attribute of css. Because this attribute has many values, I will not describe it one by one here, just talk about its translate. Add translate (0,-50%) to the center-in-center class)
.center-in-center{    position: absolute;    top: 50%;    left: 50%;    transform: translate(0, -50%);}

If you have used this attribute, you should know what is going on. Translate (0,-50%). The first value refers to the amount of horizontal movement, which is the same as that of tansform's translateX. The second value is the vertical offset but is a negative number, indicates moving in the opposite direction. Now we only need tanslate (-50%,-50%) to achieve the vertical center of the div.
Complete code and effects are attached:
<! DOCTYPE html> 

I would like to say a few more words. This can also be a very good interview question. You can pay attention to it. Of course there are other solutions, so we will not be able to make any changes here. In addition, the transform of css3 is a very powerful attribute. It can do a lot of cool effects such as 3d transformation. If you are interested, you can study it in depth. But there is a pain point in front-end, browser compatibility problems... Other browsers also say that Internet Explorer and Internet Explorer 9 support a small number of attributes, which are not supported by Internet Explorer 9. If you are still in love with IE, you can only find another path, or even use js to solve it! It's almost the weekend. You can have a good night's time!