记录：CSS水平垂直居中

  记录的样式是目前我常用到过的 ，其余没用过的不在记录范围，之后会一点点添加。

一开始接触的是position:absolute来定位居中，代码繁杂，后期处理较麻烦，父级有其他内容时很容易冲突；

       <div><p></p></div> 

       div{/*父级选择器*/
            position: relative;
            width: 200px;
            height: 200px;
            margin: auto;/*这里是父级居中，不可垂直居中*/
            background-color: #1CA0F0;
           }
          p{/*子级 ==>块级元素*/
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 60px;
            height: 60px;
            background-color: red;
           }

position中的固定定位fix也可以用来居中（一般用于广告定位），用法如absolute；

之后用的是text-algin:center加line-height:(选择器的高度)；

注：标签中内容为几行时不可用line-hight让整体内容垂直居中

      <div>Hello World!</div>

div{
            background-color: #1CA0F0;
            text-align: center;
            line-height: 100px;
            width: 200px;
            height: 100px;
        }

效果如下

再之后是flex布局中的align-items加justify-content

    

     <div><p></p></div>

    div{
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #1CA0F0;
        }
        p{
            width: 50px;
            height: 50px;
            background-color: red;
        }

第一次写记录博客，还有很多不足，慢慢改正吧。（希望对刚进入前端的你有帮助）