盒子水平垂直居中最实用四种方法

方法一(使用定位)

1.子元素必须绝对定位，父元素相对定位 

2.子元素四个方向的对立方向数值相同（都为0）

3.再给子元素加 margin:auto 可以让子元素在父元素中水平垂直居中

.far {
    width:300px;
    height:500px;
    backgound-color:skyblue;
    position:relative;
}
.son {
    width: 100px;
    height: 100px;
    /* 绝对定位 */
    position: absolute;
    /* 四个方向都为0*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

方法二(使用变换函数)

当想要居中的元素未知宽高，内容由子元素撑开时，此时使用绝对定位不能完全居中，这里就需要定位和变换函数配合使用。

思路：

1.使用绝对定位，让需要居中的元素的左上角在父级元素的中心；

2.使用变换函数里的平移函数translate向上和向左平移自己的一半（百分值针对的是自己的宽高，可以在未知宽高时使用）

.far {
    width:300px;
    height:500px;
    backgound-color:skyblue;
    position:relative;
}
.son {
    width: 100px;
    height: 100px;
	background-color: pink;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}	

方法三(使用弹性布局)

给父元素设置弹性布局，设置主轴和交叉轴对齐方式为居中对齐

.far {
    width:300px;
    height:500px;
    backgound-color:skyblue;
    display:flex;
    justify-content:center;
    align-items:center;
}
.son {
    width: 100px;
    height: 100px;
	background-color: pink;
}

方法四(使用表格垂直居中)

给需要居中的元素设置为表格单元格，使用vertical-align: middle垂直居中

.far {
    width:300px;
    height:500px;
    backgound-color:skyblue;
}
.son {
    width:100px;
    height:100px;
    backgound-color:pink;
    //设置为表格单元格
    display:table-cell;
    //设置垂直居中
    vertical-align:middle;
    //设置水平居中
    margin:0 auto;
}