Multiple verticals in the CSS are horizontally centered

Introduction to the

In the interview, CSS interview questions basically ask an element to be vertically and horizontally centered. In fact, there are many ways to achieve this, and elements can be fixed width and height, and not fixed width and height.

Fixed width high

• Position Absolute + negative margin
• position absolute + margin auto
• position absolute + calc

Unfixed width and height

• position absolute + transform
• css-table
• flex
• grid

So I’m going to go ahead and write the code, and I’m going to write the common HTML code and THE CSS code right here and I’m going to add code to that. HTML common code:

    <div class="container">
        <div class="box-center">
            box-center
        </div>
    </div>
Copy the code

CSS common code:

    .container {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    .box-center {
        width: 100px;
        height: 100px;
        background-color: red;
        color: #fff;
    }
Copy the code

There are two elements that are parent-child relationships, and the effect is that the child is centered vertically and horizontally within the parent.

Fixed width high

Fixed width and height means that the element in the middle has a fixed width and height, one by one.

Position Absolute + negative margin

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
Copy the code

Use absolute positioning to offset the child element by 50% from the top left corner of the parent element, but this is not really centered because it moves half the width and half the height of the element. We can fix this problem with negative margin, so we have -50px.

position absolute + margin auto

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
Copy the code

In this way, by setting the distance in each direction to 0, we can center the margin in each direction by setting the margin to auto.

position absolute + calc

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
    }
Copy the code

Subtract half of the height and width of the element itself from the calculated attributes by calc.

Unfixed width and height

Fixed width and height means that the element in the middle has a variable width and height. The variable width and height method can override the above fixed width and height methods, which are implemented one by one in the following code.

position absolute + transform

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
Copy the code

Css3’s transform translate property also allows you to set the percentage of the transform relative to its width and height, so you can center the transform by setting it to -50%.

css-table

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box-center {
        display: inline-block;
    }
Copy the code

Use display: table-cell to turn div elements into table elements. Vertical horizontal center is also possible with this feature.

flex

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-center {
        text-align: center;
    }
Copy the code

Vertical horizontal center is implemented through two flex properties.

grid

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        display: grid;
        justify-items: center;
        align-items: center;
    }
    .box-center {
        text-align: center;
    }
Copy the code

Center with grid layout. If you don’t know grid, look at grid layout

other

There are two special vertical horizontal middle ways, which have few application scenarios or high costs, so record them as follows:

• The inline elements are centered
• The table layout

The inline elements are centered

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        text-align: center;
        line-height: 300px;
        font-size: 0; }.box-center {
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
        font-size: 14px;
    }
Copy the code

Set container as an inline element, which is horizontally centered by text-align or vertically centered by vertical-align.

The table layout

Change the HTML structure as follows:

    <table>
        <tbody>
            <tr>
                <td class="container">
                    <div class="box-center">box-center</div>
                </td>
            </tr>
        </tbody>
    </table>
Copy the code

The CSS code is as follows:

    /* The above public code */ is referenced here
    .container {
        text-align: center;
    }
    .box-center {
        display: inline-block;
    }
Copy the code

Using the table attribute.

conclusion

The above implementation is summarized in the table below:

Recommended usage:

• PCThere are compatibilityRequirements, fixed width and height, recommendedAbsolute + negative margin
• PCThere are compatibleRequirements, width and height is not fixed, recommendedcss-table
• PCNo compatibilityRequest, recommendflex
• Recommended on mobile devicesflex

The Grid is sure to shine in the future.

reference

CSS is implemented horizontally and vertically in 1010 original ways