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;
    }