阅读 474
水平垂直居中的八种方式

水平垂直居中的八种方式

1. 绝对定位加margin:auto

position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
复制代码

demo1:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
复制代码

css部分:

.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;
}
复制代码

2. 绝对定位配合负margin

position: absolute;
top:50%;
left:50%;
margin:-高/2 -宽/2;
复制代码

demo2:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
复制代码

css部分:

.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;
}
复制代码

3. 绝对定位配合calc()计算方法

position: absolute;
top:calc(50%-高/2);
left:calc(50%-宽/2);
复制代码

demo3:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
复制代码

css部分:

.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);
}
复制代码

4. 绝对定位配合位移

position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
复制代码

demo4:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
复制代码

css部分:

.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%)
}
复制代码

5. 弹性盒子(flex布局)

display: flex;
justify-content: center;
align-items: center;
复制代码

demo5:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
复制代码

css部分

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;
    
    display: flex;
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;
}
复制代码

6. grid布局

display: grid;
align-self: center;
justify-self: center;
复制代码

demo6:

<--html-->
<div class="box">
        <div class="child">
        </div>
</div>
复制代码

css部分:

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

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

    justify-self: center;/*水平居中*/
    align-self: center;/*垂直居中*/
}
复制代码

7. writing-mode

writing-mode: vertical-lr;
writing-mode: horizontal-tb;
margin: auto;
复制代码

demo7:

<--html-->
<div class="box">
        <div class="child">
            <p></p>
        </div>
</div>
复制代码

css部分:

.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;
}
复制代码

效果展示:

image-20210903015827758.png

8. 图片和文字都居中vertical-align: middle;

vertical-align: middle;
复制代码

demo8:

<div class="box">
        <div class="child">
            <img src="https://urlify.cn/AbYfem" alt=""/>
            1432432423
        </div>
</div>
复制代码

css部分:

.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;
}
复制代码

以上拓展1:flex布局配合flex布局下的 align-items: 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;
}
复制代码

拓展2:gird布局配合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;
}
复制代码

效果展示

image-20210903084455058.png

文章分类
前端
文章标签