水平垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

亭一婷

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量22

点赞数

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

本文链接：https://blog.csdn.net/qq_40721240/article/details/130775218

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、flex

思路：flex原有属性支持

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
}

2、定位

思路：元素自身的拉扯

.container {
     height: 100vh;
     position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;;
}

3、定位50%+自身再移回去50%宽高

.container {
    height: 100vh;
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}