1.margin:0 auto；（水平居中）
适用于（块级元素）
wrapper（wrapper只负责版心的效果）定义一个固定的宽度；margin（外边距）左右的值设置为auto。
让带有wrapper的标签，都能居中布局
margin:0 auto对于已经定位的元素无效，已定位元素需要用left和top定位
如果需要让div，p，h（大盒子）水平居中？
margin:0 auto;直接给元素本身设置。
<div class="box wrapper"><img src="./tutu.jpg" alt=""></div>这里是让带有wrapper和它的子元素一起居中，并没有让img在box中居中。
.wrapper {width: 1226px;margin: 0 auto;}.box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);}
margin+width
2.margin: auto;（垂直水平居中）
适用于已知宽高
box添加绝对定位；设置上下左右为0；margin: auto;即可实现垂直水平都居中。
<div class="box"><img src="./tutu.jpg" alt=""></div> .box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
绝对定位+上下左右+margin
也可用于图片（垂直水平居中），只需要把定位改一下即可
.box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);position: relative;}img {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
3. 定位居中（垂直水平居中）
适用于未知宽高，已知高度也可以用
子绝父相
父元素 position: relative;（相对定位）；自身元素position: absolute;（绝对定位）
top: 50%;使自身元素距离上方“父元素的50%高度”的高度；left: 50%;使自身元素距离左方“父元素的50%宽度”的宽度。
transform: translate(-50%,-50%);自身元素再往左，往上平移自身元素的50%宽度和高度。
.box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);position: relative;}img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}定位+变形
4.text-align水平居中
主要使用：文字居中
- 设置给父元素，让父元素里面的文字居中。
- 父元素为块元素，子元素为行内/行内块元素（p块元素也可以），让子元素居中显示。
- 也可以将父元素（行内元素）转换为块级元素，同样可以居中显示。
- 设置浮动，定位后，父元素加text-aglin居中，子元素不能生效。
.box {width: 600px;height: 400px;background-color: rgb(117, 51, 216);text-align: center;}
text-align:center能让哪些元素水平居中？
（给父元素设置）文本；行内元素：span，a等；行内块元素：input，img等。
5.行高line-height垂直居中
适用于：文本
通过控制一行的上下间距，让单行文本垂直居中
line-height:文字父元素高度
.box {height: 400px;}p {line-height: 400px;}
（扩展）只要文字本身高度：
网页精准布局（取消上下间距）line-height:1
6.Flex居中(垂直水平居中)
.box {/* flex布局 */display: flex;/* 子元素水平居中 */justify-content: center;/* 子元素垂直居中 */align-items: center;}但是浏览器兼容性较差，常用于移动端。
7.width:fit-content; (水平居中)
设置width:fit-content;同时设置margin：auto；实现元素居中；
图片属于可替换元素，具有行内块特点，但是这里使用此方法居中不行，需要将图片转换成块元素，原因不清楚（值得深入探讨）。图片需要添加显示转换。
文字等其他元素可以实现居中。
img {/* img为可替换元素，具有行内块特点 */display: block;width: fit-content;margin: 0 auto;}缺点：
向内自适应:元素width设置了宽度，同时设置了fit-content；此时，会冲突。
（扩展）fit-content属性可以把内容包裹起来
内容长度>规定宽度（box）时，会自动换行，不超过规定宽度；
内容长度<规定宽度时，按照规定宽度设置长度。
写了多少文字，显示多长
.box {width: 600px;height: 400px;background-color: rgb(117, 51, 216);}p {width: fit-content;background-color: pink;}8.margin-top（垂直水平居中）
元素设置宽高；margin为元素: -(宽高一半);
margin-top: -100px;元素往上移到自身高度的一半。其余同理。
.box {position: relative;}img {width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;}缺点：
需要设置元素宽高。
9.vertical-align:middle（垂直居中）
行内，行内块，浏览器都当文字处理，如果是大的字和小的字，都默认基线对齐
行内元素的基线相对于该元素所在行的基线的垂直对齐。
如果行内块和行内文字无法通过vertical-align或行高对齐，可通过定位
<div class="box"><span>你好</span><img src="./tutu.jpg" alt=""></div> img {vertical-align: middle;}
