Article From:https://www.cnblogs.com/MrTanJunCai/p/9906636.html

In order to achieve the effect of vertical centering, it seems simple, but in fact it hides the mystery. This article summarizes the ways of CSS to achieve horizontal and vertical centering. This article will introduce them one by one. I have organized this article into a GitHub warehouse. Welcome to star.
Medium Element Width and Height Fixed Suitable

absolute + Negative margin
absolute + margin auto
absolute + calc

Variable width and height of intermediate elements

absolute + transform
lineheight
writing-mode
table
css-table
flex
grid

absolute + Negative margin
To achieve the above effect, do some preparation first, assuming that the HTML code is as follows, a total of two elements, parent and child elements.

123123

wpIt’s the class name of the parent element, and box is the class name of the child element. Because of the difference between certain width and variable width, size is used to indicate the specified width. Here’s the common code for all effects, mainly setting the color and width.
Note: This common code will not be repeated later, but will only give the corresponding prompt.
/* Common code*/
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}

.box {
background: green; 
}

.box.size{
width: 100px;
height: 100px;
}
/* Common code*/
The percentage of absolute positioning is relative to the width and height of the parent element. Through this feature, the child element can be displayed in the center, but the absolute positioning is based on the upper left corner of the child element. The desired effect is that the child element is displayed in the center.
To correct this problem, we can use the negative value of the outer margin to position the element in the opposite direction. By specifying the negative value of the outer margin of the child element which is half the width of the child element, we can make the child element in the middle. The CSS code is as follows

/* Location code*/.wp {Position: relative;}.box {Position: absolute uuuuuuuuuuuuTop:50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

This is my usual way. This way is easy to understand and compatible. The disadvantage is that we need to know the width and height of the sub-elements.
Click to view the complete DEMO
absolute + margin auto
This approach also requires that the width and height of the intermediate element must be fixed, and the HTML code is as follows

123123

In this way, by setting the distance in all directions to 0, and then setting margin to auto, we can center in all directions.

/* Location code*/.wp {Position: relative;}.box {Position: absolute uuuuuuuuuuuuTop:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

This method is also compatible, but the disadvantage is that we need to know the width and height of the sub-elements.
Click to view the complete DEMO
absolute + calc
This approach also requires that the width and height of the middle element must be fixed, so we add the size class to the box. The HTML code is as follows

<div class="wp">
    <div class="box size">123123</div>
</div>

Thanks to CSS3 for its computational properties, since the percentage of top is based on the upper left corner of the element, it’s better to subtract half the width. The code is as follows

/* Location code*/.wp {Position: relative;}.box {Position: absolute uuuuuuuuuuuuTop: Calc (50% - 50px);
    left: calc(50% - 50px);
}

The compatibility of this method depends on the compatibility of calc. The disadvantage of this method is that we need to know the width and height of sub-elements.
Click to view the complete DEMO
absolute + transform
Absolute positioning, but this method does not require fixed width and height of child elements, so no size class is needed. The HTML code is as follows

<div class="wp">
    <div class="box">123123</div>
</div>

To fix the problem of absolute positioning, you can also use the new transform in css3. The translate attribute of transform can also be set percentage, which is relative to its width and height. So you can say that translate is set to – 50%, so you can do it.It’s in the middle. The code is as follows.

/* Location code*/.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Compatibility of this method depends on compatibility of translate2d
Click to view the complete DEMO
lineheight
Horizontal and vertical centering can also be achieved by using in-line element centering attributes. The HTML code is as follows

<div class="wp">
    <div class="box">123123</div>
</div>

Setting box as an in-line element can achieve horizontal centralization through text-align, but many students may not know that vertical-align can also achieve vertical centralization, the code is as follows

/* Location code*/.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* Corrected text*/}

This method requires that the text display be reset to the desired effect in the child elements.
Click to view the complete DEMO
writing-mode
Many students must not know the writing-mode attribute like me. Thanks for the feedback from Mr. Zhang Xinxu. Simply speaking, writing-mode can change the direction of text display. For example, writing-mode can change the direction of text display into vertical direction.

<div class="div1">Horizontal direction & lt; / div & gt;< divclass="div2">Vertical direction & lt; / div & gt;.div2 {Writing-mode: vertical-lr;}

The results are as follows:
horizontal direction
Sag
straight
square
towards
What’s even more amazing is that all horizontal CSS attributes become vertical attributes, such as text-align. By writing-mode and text-align, the horizontal and vertical attributes can be centralized, but only slightly more troublesome.

div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>
/* Refer to the above common code *//* Refer to the above common code *//* Location code*/.wp {Writing-mode: vertical-lr;Text-align: center;}.wp-inner {Write-mode:Horizontal-tb;Display: inline-block;Text-align: center;Width:100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

This method is slightly more complicated to implement and understand.
Click to view the complete DEMO
table
Once tables were used to lay out pages, nobody does, but tables can also achieve horizontal and vertical centering, but they add a lot of redundant code.

<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>

tabelThe content in the cell is naturally centered vertically, just add a horizontal centering attribute.

.wp {
    text-align: center;
}
.box {
    display: inline-block;
}

This is because the code is too redundant, and it’s not the right use of tables.
Click to view the complete DEMO
css-table
cssThe new table attribute allows us to turn ordinary elements into the actual effect of table elements, through which we can also achieve horizontal and vertical centering.

<div class="wp">
    <div class="box">123123</div>
</div>

Now you can use the CSS attribute to make div display the same as table

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

This method works the same way as table, but it doesn’t have much redundant code, and it’s compatible.
Click to view the complete DEMO
flex
flexAs a modern layout scheme, it overturns past experience and can be elegantly centered horizontally and vertically in just a few lines of code.

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

At present, flex is fully available on the mobile side, and the PC side needs to see the compatibility of its business.
Click to view the complete DEMO
grid
Thanks to the @ Silk Sister feedback scheme, the new grid layout of CSS has not been paid much attention due to its poor compatibility. It can also achieve horizontal and vertical centralization through grid.

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

The amount of code is very small, but the compatibility is not as good as flex, so it is not recommended to use it.
Click to view the complete DEMO
summary
The following compares the advantages and disadvantages of each method, and it is certain that there should be a classmate’s way of writing back words. A brief summary is given.

PCEnd compatibility requirements, fixed width and height, recommended absolute + negative margin
PCCompatibility requirement, width and height are not fixed, css-table is recommended.
PCEnd-to-end compatibility requirements, flex recommended
Flex is recommended for mobile

Method
Fixed Width and Height of Medium Element
PCCompatibility
Mobile compatibility

absolute + Negative margin
yes
ie6+, chrome4+, firefox2+
Android 2.3+, iOS 6+

absolute + margin auto
yes
ie6+, chrome4+, firefox2+
Android 2.3+, iOS 6+

absolute + calc
yes
ie9+, chrome19+, firefox4+
Android 4.4+, iOS 6+

absolute + transform
no
ie9+, chrome4+, firefox3.5+
Android 3+, iOS 6+

writing-mode
no
ie6+, chrome4+, firefox3.5+
Android 2.3+, iOS 5.1+

lineheight
no
ie6+, chrome4+, firefox2+
Android 2.3+, iOS 6+

table
no
ie6+, chrome4+, firefox2+
Android 2.3+, iOS 6+

css-table
no
ie8+, chrome4+, firefox2+
Android 2.3+, iOS 6+

flex
no
ie10+, chrome4+, firefox2+
Android 2.3+, iOS 6+

grid
no
ie10+, chrome57+, firefox52+
Android 6+, iOS 10.3+

Recently found that many students do not attach enough importance to css, which is actually incorrect, such as the following simple questions, so many students will not, I am also very speechless.

<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
    color: red
}

.blue {
    color: blue
}

Ask what the color of two divs is, and only 40% of the students can answer it correctly. Many of the 40% students don’t know why. I hope these students can make up for the CSS foundation. Here are some CSS books for you to recommend.

Leave a Reply

Your email address will not be published. Required fields are marked *