CSS center

One, horizontal center

Inline elements:

Parent element setting: text-align:center

<style>
    div {
        text-align: center;
        width: 200px;
        height: 50px;
        background-color: lightcoral;
    }
</style>
<div>
    <span>Hello wolrd! </span>
</div>
Copy the code

Block-level elements with a specified width

1. Set the element to be horizontally centeredmargin:0 auto;

<style>
    .container {
        background-color: lightcoral;
        width: 200px;
        height: 200px;
    }
    
    .content {
        width: 50px;
        height: 50px;
        background-color: lightcyan;
        margin: 0 auto;
    }
</style>

<div class="container">
    <div class="content"> < /div>
</div>
Copy the code

2. Horizontal centered element setting: absolute positioning andmargin-left: -width/2, as well asleft:50%.The premise is that the parent element position: relative Father in the son

<style>
    .container {
        margin: 0 auto;
        position: relative;
        background-color: lightcoral;
        width: 300px;
        height: 200px;
    }
    
    .content {
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: lightcyan;
        margin-left: -50px;
        left: 50%;
    }
</style>
<div class="container">
    <div class="content"> < /div>
</div>
Copy the code

Block-level elements of unknown width

1. Sets the block-level element todisplay:tableAnd sets the elementmargin:0 auto;

<style>
    div {
        display: table;
        margin: 0 auto;
        background-color: lightsalmon;
    }
</style>
<div> block-level elements of unknown width </div>
Copy the code

2. Sets the block-level element toDisplay: inline - block, set the parent elementtext-align:centerAchieve horizontal center.

<style>
    .container {
        text-align: center;
        width: 200px;
        height: 200px;
        background-color: lightseagreen;
    }
    
    div {
        display: inline-block;
        background-color: lightsalmon;
    }
</style>
<div class="container">
    <div class="content"> block level element of unknown width </div>
</div>
Copy the code

3. Absolute positioning +transform+left:50%TranslateX moves 50% of its element.

<style>
    div {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: lightseagreen;
    }
</style>
<div> there is no block-level element </ of definite widthdiv>
Copy the code

4. The parent element sets up the Flex layout using justify-content:center

<style>
    body {
        display: flex;
        justify-content: center;
    }
    
    div {
        background-color: lightseagreen;
    }
</style>
<div> there is no block-level element </ of definite widthdiv>
Copy the code

Two, vertical center

1. Plain text: Center with line-heightheight=line-heightimplementation

<style>
    div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        background-color: lightskyblue;
    }
</style>
<div>Hello world</div>
Copy the code

2. Father in the sonBy setting relative location of the parent container and absolute location of the child +top: 0; bottom: 0; + margin:auto

<style>
    .container {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"> < /div>
</div>
Copy the code

3. Parent set relative location, child set absolute location +top:50% + The transform: translateY (50%)

<style>
    .container {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"> < /div>
</div>
Copy the code

Margin-top :-(height/2)

4. Flexible layout Flex: Parent Settingsdisplay: flex + align-items:center

<style>
    .container {
        display: flex;
        align-items: center;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        width: 50px;
        height: 50px;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"> < /div>
</div>
Copy the code

5. Of the parent elementdisplay:table-cellAnd,vertical-align:middle

<style>
    .container {
        display: table-cell;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        width: 50px;
        height: 50px;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"> < /div>
</div>
Copy the code

Three, horizontal and vertical center

1. Parent element SettingsRelative positioningChild element SettingsMargin: Auto

<style>
    .parent {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: skyblue;
    }
    .child {
        position: absolute;
        background-color: pink;
        width: 200px;
        height: 200px;
        bottom: 0;
        right: 0;
        top: 0;
        left: 0;
        margin: auto;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>
Copy the code

2. Parent element SettingsRelative positioningChild element SettingsMargin-top :-(height/2) + margin-left:-(width/2)

<style>
    .parent {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: skyblue;
    }
    .child {
        position: absolute;
        background-color: pink;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>
Copy the code

Margin-top :-(height/2); margin-left:-(width/2); margin-left:-(width/2); margin-top:-(height/2); margin-left:-(width/2);

3. useFlex layout: Sets the parent elementdisplay:flex + align-items:center + justify-content:center

<style>
    .parent {
        display: flex;
        width: 400px;
        height: 400px;
        background-color: skyblue;
        justify-content: center;
        align-items: center;
    }    
    .child {
        background-color: pink;
        width: 200px;
        height: 200px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>
Copy the code