CSS text-align: center;的使用场景和生效场景(比较详细)

text-align: center;应用场景：父盒子设置text-align: center;后，盒子里面的 文字内容、行内元素、行内块元素、都可以水平居中对齐；而块级元素一般是不可以水平居中的。
请注意，块级元素一般是不可以水平居中，是分以下两种情况的：
情况一：块级元素没有设置宽高(就会继承父盒子的宽高)，且父盒子设置了text-align: center;的话，是可以水平居中的。
情况二：块级元素设置宽高(就不会继承父盒子的宽高，以自己的宽高为准),也没有设置margin:0 auto;的时候，是不可以水平居中的。
so，块级元素想要水平居中，做法有两个：
做法一：块级元素没有设置宽高，且父盒子设置了text-align: center;
做法二：块级元素设置margin:0 auto;即可

详细事例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text-align应用场景</title>
    <meta name="description" content="text-align" />
    <meta name="Keywords" content="text-align" />

</head>
<style type="text/css">
    /*清除浏览器默认间距 */
    * {
        margin: 0;
        padding: 0;
    }

    .a{
        border:4px solid #24b3a3;
        text-align: center;
    }
    .a3 {
        /*行内块元素*/
        display: inline-block;
        width: 300px;
        height: 100px;
        background-color: green;
    }
    .a4 {
        background-color: red;
    }

    .a5 {
        width: 100px;
        height: 200px;
        background-color: pink;
    }
    .a6 {
        width: 100px;
        height: 200px;
        background-color: pink;
        /**/
        margin: 0 auto;
    }




</style>
<body>

  <!-- 父盒子设置text-align: center;后，里面的 文字内容、行内元素、行内块元素、都可以水平居中对齐，唯独块级元素不可以 -->

  <!-- 1.文字内容 -->
  <div class="a">
    CoderZb
  </div>
  <!-- 2.行内元素 -->
  <div class="a">
        <img src="https://images.cnblogs.com/cnblogs_com/crazysea/1599265/o_CoderZb.jpg" />
  </div>
  <!-- 3.行内块元素 -->
  <div class="a">
        <span class="a3">被转成行内块元素的行内元素</span>
  </div>
  <!-- 4.块级元素 没有设置宽高，可以水平居中，因为没有设置宽高，会继承父盒子的宽高；就这个例子来说，实际上就成了1的情况-->
  <div class="a">
        <div class="a4">未设置宽高+父盒子设置text-align: center;的块级元素可以水平居中</div>
  </div>
  <!-- 4.块级元素 设置了宽高+未设置margin:0 auto;的块级元素无法水平居中-->
  <div class="a">
        <div class="a5">设置了宽高+未设置margin:0 auto;的块级元素无法水平居中</div>
  </div>
  <!-- 4.块级元素 设置了宽高+设置margin:0 auto;的块级元素可以水平居中-->
  <div class="a">
        <div class="a6">设置了宽高+设置margin:0 auto;的块级元素可以水平居中</div>
  </div>


</body>
</html>

效果截图

image.png