论坛

    • 登录
    • 版块
    • 最新
    • 标签
    • 热门

    盒子如何垂直水平居中方法

    技术交流
    3
    4
    308
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • xiongbofan
      xiongbofan 最后由 admin 编辑

      盒子垂直水平居中方法:
      1、

      .box{
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      

      2、使用定位垂直水平居中:负margin居中(传统方法)
      子绝父相

      .father{
        position:relative;
        width:300px;
        height:300px;
      }
      .son{
        position: absolute;
        width:100px;
        height:100px;
        left:50%;
        top:50%
        margin-left: -50%;
        margin-top: -50%;
      }
      

      3.transform居中方法

      .box {
        width: 100px;
        height: 100px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
      

      个人觉得比较好用的垂直居中方法,还是定位和transform粗体字

      yashugongshang 1 条回复 最后回复 回复 引用 1
      • loveme199
        loveme199 最后由 编辑

        直接用flex更好

        .container {
            display: flex;
            align-items: center;
            height: 600px;
            border: 2px solid #006100; 
        }
        
        <div class="container">
            <div class="centered-element">
              <p>I'm a Camper, and I'm vertically centered</p>
            </div>
        </div>
        
        xiongbofan 1 条回复 最后回复 回复 引用 0
        • xiongbofan
          xiongbofan @loveme199 最后由 编辑

          @loveme199 ok

          1 条回复 最后回复 回复 引用 0
          • yashugongshang
            yashugongshang @xiongbofan 最后由 编辑

            @xiongbofan 学到老,活到老

            学而不思则罔,思而不学则殆

            1 条回复 最后回复 回复 引用 0
            • First post
              Last post