The problem of horizontal and vertical center in html. (Fixed height and height), html Center

The problem of horizontal and vertical center in html. (Fixed height and height), html Center

In the layout process, we need to center some elements. I believe that there is no problem in horizontal ranking, that is, the use

Margin: 0 auto; text center text-align: center.

What I want to tell you is about overall Center (horizontal center and vertical center ),

Here, I will first tell you that I have used the absolute positioning method,

Now I will create a box for you to observe directly, as shown below:

The outer and inner boxes are squares with a side length of PX and PX respectively.

We need to center the inner box. (The height of the inner frame is fixed)

1 When the height is fixed.

We usually perform Code operations like this,

Position: absolute;

Top: 50%;

Left: 50%;

At first glance, there is no problem, but after the operation, we will find

The inner box is not centered. In this case, we ignore that the inner box is a shape and not a line.

To solve this problem, we need to use the negative value of margin to move the whole, and the moving value is half the length of the border.

The Code is as follows:

Position: absolute;

Top: 50% margin-top:-50px;

Left: 50% margin-left:-50px;

The effect is as follows:

The use of negative values can bring the label closer to the parent element, so that we can achieve the center effect.

2. When the height is not fixed.

In fact, the principles of the two are the same, but in a highly irregular manner, we can not select half of the height, just change part of the Code:

Position: absolute;

Top: 50%;

Left: 50%;

Transform: translate (-50%,-50% );

In this way, the center effect is also completed.

Let's try it.