垂直水平居中

1. position定位

position定位要分两种情况，一种是已知盒子宽高，另一种是未知盒子宽高。

1. 已知宽高
	div{
 	 position: absolute; // 绝对定位
 	 left: 0;
  	 right: 0;
 	 bottom: 0;
 	 top: 0;
 	 margin: auto;
	}


2. 未知宽高
	div{
    position: absolute; // 绝对定位
 	left: 50%;
 	top: 50%;
  	transform: translate(-50%,-50%);
}

2. flex布局

// 把代码copy过去，就可以看到了

 .father {
       display: flex; // 重要的是flex相关的三条指令。
       justify-content: center;
       align-items: center;
       height: 400px;
       border: 2px solid red;
	}

.father div {
       width: 300px;
       height: 300px;
       background-color: hotpink;
	}

水平居中

1. margin

 div {
    width: 300px;
    height: 300px;
    background-color: hotpink;
    margin: 0 auto; // div是块级元素，会独占一整行。用margin的auto属性，会自动水平居中。
      }

2. text-align

(1) html标签
	<div class="father">
        <div class="son"></div>
    </div>


(2) css样式
	.father {
       text-align: center; // 父盒子使用text-align使 行内元素 / 行内块元素居中。
    }

    .son {
       display: inline-block; // 重点：将子盒子转换成行内块元素，便可实现水平方向的居中。
       width: 300px;
       height: 300px;
       background-color: hotpink;
     }

目前这四种方式就是我能想到的居中方式，在日常开发中或面试也绰绰有余。
代码可以直接copy到 VS code编译器 里查看，方便理解