There are eight ways of horizontal and vertical

1. Absolute positioning plus margin: Auto

position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
Copy the code

demo1:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
Copy the code

The CSS part:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

2. Absolute positioning with negative margin

position: absolute;
top:50%;
left:50%;
margin: - / high2- width /2;
Copy the code

demo2:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
Copy the code

The CSS part:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    top:50%;
    left:50%;
    margin: -50px -100px;
}
Copy the code

3. Absolute positioning with CALC () calculation method

position: absolute;
top:calc(50%- high /2);
left:calc(50%- width /2);
Copy the code

demo3:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
Copy the code

The CSS part:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    top: calc(50% - 50px);
    left:calc(50% - 100px);
}
Copy the code

4. Absolute positioning with displacement

position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%)
Copy the code

demo4:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
Copy the code

The CSS part:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%)}Copy the code

5. Elastic box (Flex layout)

display: flex;
justify-content: center;
align-items: center;
Copy the code

demo5:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
Copy the code

The CSS part

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;
    
    display: flex;
    justify-content: center;/* Horizontal center */
    align-items: center;/* Vertical center */
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;
}
Copy the code

6. The grid layout

display: grid;
align-self: center;
justify-self: center;
Copy the code

demo6:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
Copy the code

The CSS part:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    display: grid;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    justify-self: center;/* Horizontal center */
    align-self: center;/* Vertical center */
}
Copy the code

7. writing-mode

writing-mode: vertical-lr;
writing-mode: horizontal-tb;
margin: auto;
Copy the code

demo7:

<--html-->
<div class="box">
        <div class="child">
            <p></p>
        </div>
</div>
Copy the code

The CSS part:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;
    text-align: center;
    display: inline-block;
    writing-mode: vertical-lr;
}
.child{
    width: 100%;
    text-align: center;
    display: inline-block;
    writing-mode: horizontal-tb;
}
.child p{

    width: 200px;
    height: 100px;
    background-color: gold;
    margin: auto;
}
Copy the code

Effect display:

8. Vertical-align: middle;

vertical-align: middle;
Copy the code

demo8:

<div class="box">
        <div class="child">
            <img src="https://urlify.cn/AbYfem" alt=""/>
            1432432423
        </div>
</div>
Copy the code

The CSS part:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;
}
.child{
    width: 100%;
    height: 100%;

    line-height: 100vh;
}
.child img{
    width: 200px;
    height: 100px;

    vertical-align:middle;
}
Copy the code

Flex layout with align-items under Flex layout: Center;

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    display: flex;
    align-items: center;
    justify-content: center;
}
.child{
    display: flex;
    align-items: center;
}
.child  img{
    width: 200px;
    height: 100px;
}
Copy the code

Extension 2: GirD layout with flex align-items: Center;

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    display: grid;
}
.child{
    text-align: center;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
}
.child  img{
    width: 200px;
    height: 100px;
}
Copy the code

Results show