div水平垂直居中的4种方法

最新推荐文章于 2024-03-11 18:35:59 发布

障碍的枫子

最新推荐文章于 2024-03-11 18:35:59 发布

阅读量123

点赞数

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

本文链接：https://blog.csdn.net/weixin_43822787/article/details/120576160

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML：

  <div id="box">
    <div id="chil-box"> test </div>
  </div>

方式一：

   #box {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #F4F4F4;

    }

方式二：

#box {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: #F4F4F4;
    }

方式三：

#box {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      background-color: #F4F4F4;
    }

方式四：

 #box{
        height:800px;
        display:flex;
        align-items:center;
        justify-content:center;
        -webkit-display:flex;
        -webkit-align-items:center;
        -webkit-justify-content:center;
    }
    #chil-box{
        width:600px;
        height:600px;
        background-color: #F4F4F4;
    }