元素水平垂直居中

 

不定宽高：

 

1.子绝父相

子{

    position: absolute;

    left:50%;

    top:50%;

    transform: translate(-50%, -50%);

}

 

定宽高：

 

2.子绝父相

子{

    width:600px;

    height: 600px;

    position: absolute;

    left:50%;

    top:50%;

    margin-left:-300px;

    margin-top:-300px;

}

 

3.子绝父相

子{

    position:absolute;

    width: 600px;

    height: 600px;

    left:0;

    top: 0;

    bottom: 0;

    right: 0;

    margin: auto;

}

4.Flex

父{

    height:800px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #ccc;

}

5.table-cell

子{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    width: 240px;

    height: 180px;

    border:1px solid #666;

}

6.calc() 函数动态计算

子绝父相

子{

  position: absolute

  width: 200px

  height: 50px;

  left:calc((400px - 200px)/2);

  top:calc((160px - 50px)/2);

}