水平垂直中心問題の解決方法

1645 ワード

水平垂直中心問題の解決方法


1 flexレイアウト



  

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解決



  

4 es 6の新しいプロパティtransform