CSS关于居中的问题行内和块级元素自身相对父控件居中，块级元素相对父控件居中，行内元素相对于父控件居中，实现单行文字垂直

⚓行内和块级元素自身相对父控件居中

给行内和块级元素设置宽高，出现的现象：

设置宽高对行内元素没有效果
设置宽度对块级元素有效果

    span {
      width: 100px;
      height: 100px;
      text-align: center;
      background-color: skyblue;
    }
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

是因为行内元素的宽高是由内容决定的。

🏐块级元素相对父控件居中

只能通过盒子模型的外边距实现，这个属性写在元素本身上面。

div {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 0 auto;
}

如果是没有设置宽高的话，可以通过父控件的text-align实现，但是不能用margin: 0 auto实现。

🏐行内元素相对于父控件居中

只能通过父控件的text-align实现。

body {
  text-align: center;
}
span {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

🛳️实现单行文字垂直居中

对于单行文字：可以实现文字垂直居中(height 等于 line-height)。

div {
  width: 300px;
  height: 300px;
  background-color: pink;
  line-height: 300px;
}

<div>我是单行文字</div>

🔔由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。

✈️子绝父相实现子元素的水平垂直居中

前提：定位的元素必须设置宽和高

这里我们创建父元素和子元素，并设置样式。

.father {
  width: 600px;
  height: 600px;
  background: pink;
}
.son {
  width: 300px;
  height: 300px;
  background: #95a299;
}

🌋方案一

直接计算移动的需要距离。

left: 父子元素高度差的一半; top: 父子元素宽度差的一半;

示例：

子元素 y 轴移动的距离是父子元素高度差的一半，

子元素 x 轴移动的距离是父子元素宽度差的一半。

.father {
  width: 600px;
  height: 600px;
  background: pink;
  position: relative;
}

.son {
  width: 300px;
  height: 300px;
  background: #95a299;
  position: absolute;
  top: 150px;
  left: 150px;
}

🔇弊端：偏移值left和top是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。

🌋方案二

这里的left和top我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。

left: 50%; top: 50%; margin-left: 自身宽度的一半; margin-top: 自身高度的一半;

示例：

.son {
  width: 300px;
  height: 300px;
  background: #95a299;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px; /* 向左移动自身宽度的一半 */
  margin-top: -150px; /* 向上移动自身宽度的一半 */
}

🔇弊端：由于margin-left和margin-top值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。

🌋方案三(推荐)

子元素相对父元素移动 50%的距离后，使用transform调整子元素的位置。

示例：

width: 300px;
height: 300px;
background: #95a299;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

🔔优势：不用计算调整子元素移动移动的距离，用百分比表示即可。

🌋方案四(了解一下)

子绝父相，子元素设置以下属性，也能进行水平垂直居中。

简单理解：四个方向有相同的力在拉这个盒子，margin:auto是让这个盒子的位置保持中立，来达到盒子处于正中心。

        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

🛸flex 实现水平垂直居中

🎡方法一

父元素开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中。

display: flex;
/* 设置子元素水平居中 */
justify-content: center;
/* 设置子元素垂直居中 */
align-items: center;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-flex布局-实现子元素水平垂直居中</title>
    <style>
      .father {
        background: pink;
        height: 300px;
        display: flex;
        /* 设置子元素水平居中 */
        justify-content: center;
        /* 设置子元素垂直居中 */
        align-items: center;
      }
      .son {
        width: 100px;
        height: 100px;
        background: #a5ccaf;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

🎡方法二

父容器开启 flex 布局，随后子元素 margin: auto。

.father {
  background: pink;
  height: 300px;
  display: flex;
}
.son {
  width: 100px;
  height: 100px;
  background: #a5ccaf;
  margin: auto;
}