CSS如何实现绝对居中——水平、垂直都居中

方法一：

​ 使用margin:auto;实现具有width属性和height属性的绝对定位元素的居中

.box{
    width:;
    height:;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

方法二：

​ 使用margin负间距实现具有width属性和height属性的绝对定位元素的居中

.box{
    width:;
    height:;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -元素本身宽度的一半;
    margin-top: -元素本身高度的一半;
}

方法三：

position: absolute;
left: 50%;  父元素宽度的50%
top: 50%;  父元素高度的50%
transform: translate(-50%,-50%);  元素本身宽度的一半，元素本身高度的一半

方法四：

display: flex;
justify-content: center;
align-items: center;

方法五(特殊情况)：

​ 图片或某个盒子，有宽高并放置在一个宽高确定的大盒子中，可以使用 margin: 0 auto;实现居中

方法六(特殊情况)：

​ 文字确定字体大小且知道行高、包裹的盒子的宽度，可用：

font: font-size/line-height font-family;	//拥有行高实现垂直居中
text-align:center;		//已知父盒宽度实现垂直居中