#40 水平垂直居中


  • 0

    flex 布局不可以么


  • 0

    http://www.cnblogs.com/xiaohuochai/p/5314289.html#anchor5

    有 transform 可以移动自己 50%, 没有 transform 使的时候, 可以套一层 div
    然后 margin-left: -50%; margin-top: -50%;

    https://jsfiddle.net/magicdawn/bmrqy8q6/


  • 0

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


  • 1

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

  • 0

    #wrapper{
    width: 500px;
    height: 500px;
    background: red;
    display: grid;
    justify-items:center ;
    align-items: center;
    }
    #box{
    width: 100px;
    height: 100px;
    background: yellow;
    }


  • 1

    // 1、position+transform
    #wrapper{
      position:relative;
    }
    #box {
      position:absolute;
      width: 100px;
      height: 100px;
      top:50%;
      left:50%;
      /* transform:translate(-50%, -50%); */
      /* 或者 */
      margin: -50px 0 0 -50px;
    }
    // 2、或者flex布局
    #wrapper{
      display:flex;
      justify-content:center;
      align-items:center;
    }
    #box {
      width: 100px;
      height: 100px;
    }
    

  • 0

    我是这样写的
    #wrapper {
    position: relative;
    }
    #box {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: red;
    }


  • 0

    #box {
    position: relative;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    }
    完美解决


  • 0

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


  • 0

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

  • 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 的连接断开,我们正在尝试重连,请耐心等待