实现水平垂直居中的方法

<div style="display: flex; justify-content: center; align-items: center;">Ant Design</div>

 

 

经典水平垂直居中方法

div {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: orange;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
        }

块级元素使用margin更灵活些

span {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background: orange;
        }

 迅速让一个div水平垂直居中的方法：

div {
    position: absolute;
    width:100px;
    height:100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    border:1px solid black;
}

 使用translate实现居中

 

div.wrapper{
    position: absolute;
    left: calc(50%);
    top: calc(50%);
    width:300px;
    height: 300px;
    transform: translate(-50%,-50%);
}

 

.wrapper .content .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

 

div.wrapper{
    position: absolute;
    width:300px;
    height:300px;
    margin: 250px auto;  
}

 使用弹性盒子的方式居中：

.chess {
    width : 50px;
    height: 50px;
    border: 2px solid lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.chess .chess-item {
    width        : 30px;
    height       : 30px;
    border-radius: 50%;
}

.chess .red {
    background: radial-gradient(#fff, #f20);
}

.chess .black {
    background: radial-gradient(#fff, black);
}