Center layout of the front end interview

Horizontal center

The inline elements are horizontally centered

Method: Use text-align: center for the inline element’s parent

<style>
* {
    margin: 0;
    padding: 0;
}

.box {
    border: 1px solid blue;
    height: 200px;
    text-align: center;
}
.box > span {
    background: pink;
}
</style>
<div class="box"> <span> Horizontally center the elements in the line </span> </div>Copy the code

Block-level elements are horizontally centered

Margin: 0 auto for block-level elements.

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        width: 200px;
        background: pink;
        margin: 0 auto;
    }
</style>
<div class="box"> <p> Block level elements horizontally centered </p> </div>Copy the code

fit-content + margin: 0 auto

If the child element contains float, to center the child horizontally, set the parent element width to fit-Content, along with margin.

<style>
* {
    margin: 0;
    padding: 0;
}

    .box {
        border: 1px solid blue;
        height: 200px;
        width: fit-content;
        margin: 0 auto;
    }
    .box > p {
        float: left;
        width: 300px;
        background: pink;
    }
</style>
<div class="box"> <p> Block level elements horizontally centered: child elements float </p> </div>Copy the code

CSS3 Max /min-content and fit-Content width values

flex + justify-content: center

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
        justify-content: center;
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        width: 300px;
        background: pink;
    }
</style>
 <div class="box">
    <p>flex + justify-content: center</p>
</div>
Copy the code

absolute + transform

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 50%;
        background: pink;
        transform: translate(-50%, 0);
    }
</style>
 <div class="box"<p> Width unknown: absolute + transform</p> </div>Copy the code

SVG Transform coordinate transforms

Known width: absolute + negative margin-left

<style> * { margin: 0; padding: 0; } .box { border: 1px solid blue; height: 200px; } .box > p { position: absolute; left: 50%; width: 300px; background: pink; margin-left: -150px; /*-0.5width*/} </style> <div class="box"Margin-left </p> </div>Copy the code

Absolute + left:0; right:0; margin:0 auto

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 0;
        right: 0;
        width: 300px;
        background: pink;
        margin: 0 auto;
    }
</style>
<div class="box"> <p> Width known: absolute + left:0; right:0; margin:0 auto</p> </div>Copy the code

Vertical center

Given the height of the parent element: line-height: height

If the element is a single line of text, you can set line-height to equal the parent element height.

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        background: pink;
        line-height: 200px;
    }
</style>
 <div class="box"</p> </div>Copy the code

Height of parent element: If the element is an inline block-level element such as img, you can use display: inline-block, vertical-align: middle and a pseudo-element.

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box::after {
        content: ' ';
        height: 100%;
    }
    .box > img, .box::after {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
    }
</style>
<div class="box">
    <img src="./mm.png" alt="">
</div>
Copy the code

flex + align-items: center

absolute + transform

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        background: pink;
    }
</style>
 <div class="box">
    <p>absolute + transform</p>
</div>
Copy the code

display: table

<style> * { margin: 0; padding: 0; } .box { display: table; width: 100%; height: 200px; border: 1px solid blue; } .box > p { display: table-cell; Vertical-align: middle; /* vertical-align: middle; } </style> <div class="box">
    <p>flex</p>
</div>
Copy the code

Horizontal and vertical center

absolute + transform

 <style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: pink;
    }
</style>
<div class="box">
    <p>absolute + transform</p>
</div>
Copy the code

flex

Table is centered horizontally and vertically

Method: Inline-block + text-align + table-cell + vertical-align

<style> * { margin: 0; padding: 0; } .box { display: table-cell; width: 100vw; height: 200px; border: 1px solid blue; text-align: center; /* vertical-align: bottom; }. Box > span {}. Box > p {width: 100px; display: inline-block; } </style> <div class="box"> <p> Block-level elements: the table is centered horizontally and vertically </p> </div> <div class="box"</span> </div>Copy the code

We know the height of the parent, the height of the child

Method: Absolute positioning + four directions set 0 + Margin: auto

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 300px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
    }
</style>
 <div class="box"</p> </div>Copy the code