CSS学习

qq_40925074

已于 2022-04-07 11:43:40 修改

阅读量86

点赞数

分类专栏： css 文章标签： css css3 html

于 2022-03-23 14:59:24 首次发布

本文链接：https://blog.csdn.net/qq_40925074/article/details/123533848

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、实现一个元素的水平、垂直、水平垂直居中

1、水平垂直

（1）不定宽高

采用flex+justify+align-items

<div class="wrap">
        <div class="box">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}

.box {
    background-color: blue;
}

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

（2）定宽高

<div class="wrap">
        <div class="box size">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.box.size{
    width: 150px;
    height: 150px;
}

/* 第一种 */
/* top和left分别设置为50%，margin-top和margin-top设置为高宽的一半的负值 */
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -75px;
    margin-left: -75px;
    text-align: center;
}

/* 第二种：left、right、top、bottom都设置为0，margin设置为auto，text-align：center */
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    text-align: center;
}