浮動元素水平垂直居中

方法一：使用transform屬性

.content{ //父元素
            width: 200px;
            height: 200px;
            border: 2px solid gainsboro;
            position: relative;
}
 .box{//子元素
            width: 50px;
            height: 50px;
            position: absolute;
            border: 2px solid salmon;
            float: left; //子元素進行浮動
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            
}

方法二：未知父元素高寬 

.box{//子元素 父元素進行絕對定位
            width: 50px;
            height: 50px;
            position: absolute;
            border: 2px solid salmon;
            float: left;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin:  auto;
        }

方法三：使用Flex

.content{ //對父元素使用
            width: 200px;
            height: 200px;
            border: 2px solid gainsboro;
            display: flex;
            justify-content: center;
            align-items: center;
        }

方法四：使用table-cell，vertical-align:middle

.content{ //對父元素使用
            width: 200px;
            height: 200px;
            border: 2px solid gainsboro;
            display: table-cell;
            vertical-align:middle;
        }
.box{
            width: 50px;
            height: 50px;
            border: 2px solid salmon;
            margin:auto;
        }