#40 水平垂直居中


  • 0

    @CodeHz 你不是一个人+1


  • 0

    @lizboa#40 水平垂直居中 中说:

    #wrapper {
    display:flex;
    }
    #box {
    width: 100px;
    height: 100px;
    margin:auto;
    }


  • 0

    @jax 不能给父盒子设置宽高吧 不是说父盒子宽高未知吗


  • 0

    #box {
      width: 100px;
      height: 100px;
    }
    #wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    

  • 1

    写css半分钟写出来,写一道js题半小时都写不完,我怕是废废的了


  • 0

    #box {
    width: 100px;
    height: 100px;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    margin:0 auto;
    }
    一步到位,不是说了#wrapper高宽都未知吗


  • 1

    /*******************提供六种方法********************/
    /*方法一*/
    #wrapper {
      position: relative; 
    }
    #box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /*方法二*/
    #wrapper {
      position: relative;
    }
    #box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
    
    /*方法三*/
    #wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #box {
      width: 100px;
      height: 100px;
    }
    
    /*方法四*/
    #wrapper {
      position: relative;
    }
    #box {
      width: 100px;
      height: 100px;
      position: absolute;
      left: calc(50% - 50px);
      top: calc(50% - 50px);
    }
    
    /*方法五*/
    #wrapper {
      position: relative;
    }
    #box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    
    /*方法六*/
    #wrapper {
      display: flex;
      align-items: center;
    }
    #box {
      width: 100px;
      height: 100px;
      margin: 0 auto;
    }
    
    
    
    

  • 0

    看了大家的代码才知道就一个相对定位还有这么多玩法。学习了。
    #wrapper{
    position:absolute;
    }
    #box {
    position:relative;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
    width: 100px;
    height: 100px;
    }


  • 0

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


  • 0

    对的老哥,对的,想的一致


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待