css如何让一个块级元素居中的

最新推荐文章于 2022-04-05 16:57:00 发布

Loveyless

最新推荐文章于 2022-04-05 16:57:00 发布

阅读量662

点赞数

分类专栏： css小技巧文章标签： html css css3 less sass

本文链接：https://blog.csdn.net/weixin_43870744/article/details/118224883

版权

css小技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一种方法

{
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(-300px/2);
    margin-left: calc(-450px/2);
  }

第二种方法

{
    width: 450px;
    height: 300px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

第三种方法

{
  height: 100%;
  background-color: #ccc;
  .login_box{
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    //横纵轴都偏移50%
  }