This is the first day of my participation in the More text Challenge. For details, see more text Challenge

Source address: github.com/ohsogasne/1… (Welcome to star, we will bring you a lot of good works.)

Introduction: Center alignment is an extremely common requirement. It seems so simple and natural in theory, but in practice it is always a problem for beginners. Today we will talk about eleven of my favorite center alignment methods. James Anderson said, “Forty-four years after we put a man on the moon, we still can’t vertically center CSS.” In fact, just like eating lunch with chopsticks and spoons, as long as you understand how to use “chopsticks and spoons” and use them often, you can master them. The center is no exception, and many center problems will be solved when you understand the following eleven center alignings. Let’s take a look at the dining etiquette in the middle Kingdom.

1, flexbox

In my opinion, this is the best solution. On Flexbox, we only need to use three lines of code for center alignment. Set the parent of the element to display: flex; justify-content: center; align-items: center;

/* HTML part */<div class="box1">flex</div>/* CSS section */.box1{display: flex; justify-content: center; align-items: center; }Copy the code

(figure 1)

2, the grid

The grid layout is also a great solution, using three lines of code to solve the center layout display: grid; justify-items: center; align-items: center;

/* HTML part */<div class="box0">grid</div>/* CSS section */.box0{display: grid; justify-items: center; align-items: center; }Copy the code

(figure 2)

(figure 3)

3, the inline element is centered

Inline elements are elements that only occupy the size of their own element. The use of inline elements is simple, horizontal: text-align: center; Vertical: Set the line height to the same as the box (line-height:Box_height). You can implement the first part of the inline elements standard flow in Figure 3 with the following code.

/* HTML part */<div class="standard1 standard"><span>Standard flow of inline elements</span></div>/*.standard1 {text-align: center; The line - height: 9.6 rem; Height: 9.6 rem; }Copy the code

4. Single block-level elements are vertically and horizontally centered

Block-level elements occupy one or more lines and have their own width, height, and inner and outer margins. A single block-level element is centered using only two lines of code, namely margin: auto; The line – height: Box_height; text-align: center;

/* HTML part */<div class="standard2">
            <p>Method 3: single block level</p>
</div>/* CSS section */.standard2 p {width: 16rem; Height: 9.6 rem; margin: auto; text-align: center; The line - height: 9.6 rem; }Copy the code

5. Multiple block-level elements are vertically and horizontally centered

You just set the block-level element to the in-line block element and apply the in-line element center pattern

/* HTML part */<div class="standard3 standard">
            <p>Method four multiple</p>
            <p>Block-level elements</p>
            <p>Vertical horizontal center</p>
</div>/* CSS section */.standard3 {height: 13rem; text-align: center; The line - height: 4.3 rem; } .standard3 p { display: inline-block; width: 20rem; Height: 4.3 rem; border: solid 1px red; }Copy the code

Induction: In 3, 4, 5 of these 3 methods, all exist as a standard flow centered layout. As the most basic centering application, it is still active in CSS code for projects of all sizes. I divide this type of layout into three categories: in-line elements centered, single block-level elements horizontally centered, and multiple block-level elements vertically and horizontally centered. We can see in the image on the right there are two dark grey and black lines, which are divided into three modules.

2. Set the row height to be the same as the box height

Differences: 2. When block-level elements are aligned to a single element, magIN value should be set to auto. 3. When multiple block-level elements are centered, block-level elements need to be transformed into inline block elements. Set the line height to the box height and align it with the text level to center it (another weakness of this standard centering)

(figure 4)

6, negative margin implementation method

The corresponding effect diagram of this method is Method 6 in Figure 4. We all know that positioning principle is one of the son of the father, first by using the principle set absolutely, the box to the parent element through the top and left set to 50%, this time will find that it is actually run to the lower right, the reason is that the box itself is also a wide high value, and this time we need to use negative margin will this box to pull back, It’s going to be half the width and half the height of the box. At this point we have a box that is fully centered with respect to the parent element.

< span style = “box-sizing: border-box; color: RGB (0,0, 0); line-height: 0

/* HTML part */<div class="box3">
            <div class="posation1"> HI!</div>
 </div>/*.box3 {background-color: #4285f4; position: relative; width: 150px; height: 100px; } .posation1 { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -75px; text-align: center; line-height: 100px; }Copy the code

Margin value method

The effect of this method is corresponding to Method 7 in FIG. 4. The principle of this method is to determine that the subbox is in the parent box by using the principle of child’s absolute parent phase, and margin is set to auto, so the margin can automatically occupy all the free space, and the subbox will be squeezed to the upper left corner. Set left and top equal to 0, that is, the subbox corresponds to the parent box is 0 distance, so Magin will squeeze the remaining space average to the subbox to make it close to the parent box, so all directions are centered.

Under normal conditions, margin is 0, and after auto is set, margin will be used to calculate the size of the remaining space that should be obtained in the corresponding direction of the element. Filling rules: (1) If one side is fixed and one side is auto, then auto is the size of the remaining space. (2) If both sides are AUTO, then the remaining space is divided evenly

<div class="posation2 p_init">IM </div> </div> /* CSS */. Box3 {position: relative; } .posation2 { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }Copy the code

8. Calc dynamic calculation method

This method effect corresponds to Method 8 in Figure 4. If you're familiar with the new CSS features, then you're familiar with calC computing properties, which provide dynamic computing capabilities that solve the problem of CSS computations. It works in the same way as the negative margin method but saves a lot of code. When using this property to deal with the middle, apply the formula:Copy the code

/* HTML part */ <div class="box3 box34_init"> <div class="posation3 p_init">Aben</div> </div> position: absolute; left: calc(50% - 75px); top: calc(50% - 50px); }Copy the code

Induction: In 6, 7, 8 these 3 methods belong to the known box size by calculation to get the center effect. When we encounter the most common situation in actual development, we will center the box when we know the box’s width and height. In general, I can use the following three methods: negative margin method, MARGIN setting method, and CALC dynamic acquisition method. In figure 4 on the right, the three renderings correspond to these three methods. You can find that they are not different for the effect, the difference is in the use of different code to use, and willing to use what, through the above explanation can be any choice!

(figure 5)

9, the table – cell method

When we set up an HTML table, we see that all elements are arranged in the middle by default, as we said before. The reason is that the display of table is table, and the display of TD is table-cell. So you can easily center the element by setting it to table-cell. However, it is important to note that you need to understand whether the other style properties are appropriate for your needs, as this will have a knock-on effect.

<div class="box4 box34_init"> <p>HTML</p> </div> /* CSS section */. text-align: center; vertical-align: middle; }Copy the code

10, the translate method

The translate() function is a new feature of CSS3. Without knowing its own width and height, it can be used to center horizontally and vertically. When using: top: 50%; left: 50%; Translate (-50%,-50%) : moves up (X-axis) and left (Y-axis) by 50% of its width and length so that it is centered. Unlike negative margin-left and margin-top implementations, where margin-left must know its own width and height, translate can center without knowing its width and height. The percentage in translate () is the percentage relative to its own width and height, so it can center

/* HTML part */ <div class="box5 box34_init"> <p>CSS</p> </div> /* CSS part */. background-color: #34a853; } .box5 p { font-size: 2rem; color: aliceblue; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Copy the code

(figure 6)

11. Pseudo element centering method

<div class="box6 box34_init posation"> <p class="bluebox"> </p> </div> /* CSS section */. content: ''; width: 0; height: 100%; display: inline-block; position: relative; vertical-align: middle; } .bluebox { display: inline-block; vertical-align: middle; }Copy the code

In the road of development, the predecessors found that not only some attributes can be used to center the element, but also pseudo elements can be used to nest the box to the edge of the box to be placed in the center. The usage is simple: First set display: Inline-block (because vertical-align:middle only for inline elements), vertical-align:middle so that the target box is in the middle of the pseudo-element, and 100% height for the pseudo-box.

Write in the last

What works will I finish next: 1. Explanation of native HTML and CSS; 2. Linux system class, which is to deepen my learning by writing Linux; 3. So I’ll see you next time. Bye