元素水平垂直居中的方式有哪些？

• absolute加margin方案
• fixed 加 margin 方案
• display:table 方案
• 行內(nèi)元素line-height方案
• flex 彈性布局方案
• transform 未知元素寬高解決方案

absolute加margin方案

div{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%:
    margin-top: -50px;
    margin-left: -50px;
}

display:table 方案

div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100px;
    height: 100px;
}

行內(nèi)元素line-height方案

div{
    text-align: center;
    line-height: 100px;
}

flex 彈性布局方案

div{
    display: flex;
    align-items: center;
    justify-content:center
}

transform 未知元素寬高解決方案

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}