目录
一、水平居中：
1、（子元素居中）父：text-align：center；（行内元素）
2、（自己居中）自己：margin：0 auto；（块级元素）
3、（子元素居中）（子）display:inline-block; （父）text-align：center；（多块级元素）
4、（子元素居中）（父）display：flex；justify-content:center;
二、垂直居中：
1、（inline- ）单行文本自己：line-hight：盒子高度；
2、利用表：
3、flex换主轴的方式：父元素：display：flex；flex-direction:column;justify-content:center;
4、精灵元素：在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐
5、（已知子元素高度）：绝对定位50%；margin-top：子元素高度的一半
6、（子元素未知高度）：绝对定位50%；transform：子元素高度的50%
三：水平垂直居中：
1、父相子绝 + margin （已知子元素高度）：宽高各移一半
2、父相子绝 + transform 移动（未知子元素高度）
3、利用flex，主/纵轴都设为center
4、用flex：弹性盒子+margin：auto；
5、屏幕上
6、父相子绝 + margin: auto; 上下左右：0；
7、padding+margin-top:（父height-子heigh）/2
8、利用grid （兼容性较差，不推荐）
一、水平居中：
1、（子元素居中）父：text-align：center；（行内元素）
文本在盒子中水平居中：text-align：center；（用于inline、inline-block、inline-table、inline-flex）
2、（自己居中）自己：margin：0 auto；（块级元素）
盒子在父盒子中水平居中：margin：0 auto；（用于block）
3、（子元素居中）（子）display:inline-block; （父）text-align：center；（多块级元素）
子元素们：display:inline-block;父元素：text-align：center；(如果一行中有两个及以上的块级元素，将父元素设text-align)
4、（子元素居中）（父）display：flex；justify-content:center;
多块级元素水平居中：父元素：display：flex；justify-content:center;
二、垂直居中：
1、（inline- ）单行文本自己：line-hight：盒子高度；
2、利用表：
3、flex换主轴的方式：父元素：display：flex；flex-direction:column;justify-content:center;
4、精灵元素：在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐
<head><style>.d1 {width: 400px;height: 400px;background-color: red;position: relative;}.d1::before {content:"";display: inline-block;height: 100%;width: 1%;vertical-align: middle;}.d2 {width: 100px;height: 50px;background-color: pink;display: inline-block;vertical-align: middle;}</style></head><body><div class="d1"><div class="d2">as</div></div></body>
5、（已知子元素高度）：绝对定位50%；margin-top：子元素高度的一半
子元素 绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半（块级元素）
<head><style>.d1 {width: 400px;height: 400px;background-color: red;position: relative;}.d2 {position: absolute;width: 100px;top:50%;height: 100px;margin-top:-50px;background-color: pink;}</style></head><body><div class="d1"><div class="d2">as</div></div></body>
6、（子元素未知高度）：绝对定位50%；transform：子元素高度的50%
子元素 绝对定位元素距离顶部50%，并用transform属性向Y轴反向偏移50%（部分浏览器存在兼容性问题）
<head><style>.d1 {width: 400px;height: 400px;background-color: red;position: relative;}.d2 {position: absolute;width: 100px;top:50%;transform: translateY(-50%);background-color: pink;}</style></head><body><div class="d1"><div class="d2">as</div></div></body>
三：水平垂直居中：
1、父相子绝 + margin（已知子元素高度）：宽高各移一半
margin-left 和 margin-top 分别是宽高的一半
.fa {width: 300px;height: 200px;border: 1px solid #000;position: relative;}.son {width: 100px;height: 50px;position: absolute;left: 50%;margin-left: -50px;top: 50%;margin-top: -25px;} <div class="fa"><div class="son"></div></div>
2、父相子绝 + transform 移动（未知子元素高度）
x和y轴各移动宽高的百分之50%
.div1 {width: 500px;height: 500px;background-color: red;position: relative;}.div2 {height: 200px;width: 200px;background-color: blue;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}<div class="div1"><div class="div2"></div></div>
3、利用flex，主/纵轴都设为center
.d1 {width: 300px;height: 200px;border: 1px solid #000;display: flex;justify-content: center; /*主轴 */align-items: center;/*纵轴 */}.d2 {width: 100px;height: 100px;background-color: pink;}<body><div class="d1"><div class="d2">as</div></div></body>
4、用flex：弹性盒子+margin：auto；
.fa {width: 300px;height: 200px;border: 1px solid #000;display: flex;}.son {width: 20px;height: 20px;background-color: pink;margin: auto;}<div class="fa"><div class="son"></div></div>
5、屏幕上
此方法十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。
6、父相子绝 + margin: auto; 上下左右：0；
（如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）
.fa {width: 500px;height: 500px;background-color: purple;position: relative;}.sn {width: 300px;height: 300px;background-color: yellow;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;（如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）}<div class="fa"><div class="sn"></div></div>
7、padding+margin-top:（父height-子heigh）/2
.fa {width: 500px;height: 400px;background-color: red;box-sizing: border-box;padding-top: 1px; /*不写这个的话，无法垂直居中，因为父 子元素之间没有任何东西，会外边距合并，可以用padding-top和box来解决，更多解决方案在盒子模型里 */}.son {width: 300px;height: 200px;background-color: blue;margin: 0 auto;margin-top: 100px;}<div class="fa"><div class="son"></div>
8、利用grid （兼容性较差，不推荐）
<head><style>.d1 {width: 300px;height: 200px;border: 1px solid #000;display: grid;}.d2 {width: 100px;height: 100px;background-color: pink;margin: auto;}</style></head><body><div class="d1"><div class="d2">as</div></div></body>
垂直水平居中：
1、position+tranform
.fa {
positon:relative;
}
.son{
position:absolute;
left:50%;
right:50%;
transform:translate(-50%,-50%)
}
2、postion+margin:宽高各移一半
.fa{
position:relative;
}
.son{
position:absolute;
left:50%;
top:50%;
margin-left:-父元素宽度的一半px；
margin-top:-父元素高度的一半px;
}
3、margin-top:（父height-子heigh）/2
.fa {
box-sizing:border-box;
padding-top:1px;
}
.son {
margin:0 auto;
margin-top:（父height-子heigh）/2
}
4、positon+margin
.fa{
positon:relative;
}
.son{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
5、flex
.fa {
display:flex;
justify-content:center;
align-items:center;
}
6、flex+margin:auto
.fa {
display:flex;
}
.son{
margin:auto;
}
