水平垂直居中问题的解决方法

水平垂直居中问题的解决方法

1flex布局




  

2 margin auto进行解决

 .father {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }

  .children {
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }



  

3.margin-left和margin-top解决




  

4es6的新属性transform




  

你可能感兴趣的:(水平垂直居中问题的解决方法)