不定宽高垂直水平居中的几种方法

最新推荐文章于 2022-05-05 18:42:02 发布

就这么开心

最新推荐文章于 2022-05-05 18:42:02 发布

阅读量236

点赞数 2

分类专栏： css 文章标签：不定宽高

本文链接：https://blog.csdn.net/weixin_43478869/article/details/84648623

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

父子定位，子元素使用 transfrom:translate()；属性

.box {
    width: 700px;

    height: 700px;

    border: 1px solid red;

    margin: 50pxauto;

    position: relative;

}
.box1 {
     width: 100px;
     height: 100px;
     background-color: green;
     position: absolute;
     left: 50%;
     top:50%;
     transform: translate(-50%, -50%); 
}

父子定位，子元素使用 left right top bottom margin: auto;属性

.box {
    width: 700px;
    height: 700px;
    border: 1px solid red;
    margin: 50pxauto;
    position: relative;

}
.box1 {
     width: 100px;
     height: 100px;
     background-color: green;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -50px;
     margin-top: -50px;
}

使用 flex 布局

.box {
      width: 700px;
      height: 700px;
      border: 1px solid red;
      margin: 50px auto;
      display: flex;
      justify-content: center;  
      align-items: center; 
    }
.box1 {
      width: 100px;
      height: 100px;
      background-color: green;
}