浮动元素水平垂直居中

Posted 2021-12-03 kbinblog

方法一：使用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;
        }