【CSS】【布局】水平垂直居中专题

不要做一个绿茶，我家不养碧螺春，唯有strong是王道。

参考慕课网上Kingj老师的“一站搞定css布局”，感兴趣的小伙伴可以移步学习，

以下为参考链接：https://www.imooc.com/learn/1189

1.水平居中布局

父级元素和子级元素分别按照如下设置

#parent { text-align: center; }

#child { text-align: left; }

  <style>
    #parent {
      width: 100%;
      height: 200px;
      background: #ccc;
      /* 
        text-align属性:是为文本内容设置对齐方式
        * left:左对齐
        * center:居中对齐
        * right:右对齐
       */
      text-align: center;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #c9394a;
      /* 
        display属性:
        * block:块级元素
        * inline:内联元素(text-align属性有效)
          * width和height属性是无效的
        * inline-block:行内块级元素(块级+内联)
          * width和height属性是有效的
       */
      display: inline-block;

      text-align: left;
    }
  </style>