css中的定位和居中

相对定位
/* div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
             定位=定位模式+边偏移
            position: relative;
            top:100px;
            left:100px
        } */
        /* 相对定位的特性：
        1：相对定位以元素自身的位置为基准设置位置

        2：相对定位占位置 */
绝对定位
          /* position: relative; */
          /* 
            绝对定位 以父级为标准移动位置
                如果父级没有定位 绝对定位的盒子以我们文档为准
                如果父级有定位 绝对定位以父级为准移动位置
             */
          绝对定位不占位置
子绝父相

固定定位

        position: fixed;
        /* 和父级没有任何关系  脱标*/
        /* 数值越大越靠上  后面不要跟单位  只能是整数 */
        绝对定位会改变display属性
        /* 
            块级元素 不给width 默认和父元素一样宽
            行内设置宽度不生效
            绝对定位可以转换(行内 元素宽高生效)
            浮动也可以
        */
css中所有居中问题的总结
        <!-- 
        横向居中：
            行内 行内块 文字 在块级里面横向居中：
                给块级元素添加text-align:center
            行内 文字 行内块在行内块里面横向居中
                给你行内块天机text-align:center
            块级在另一个块级里面横向居中：
                给内部的块级加宽度(小于外部的)
                同时设置margin:0 auto
        纵向居中：
            行内 文字在块级里面纵向居中：
                给当前的块级+line-height=当前块级元素高度 前提是 行内和文字是单行的
            行内块 在块级里面纵向居中
                给当前行内块+vertical-align:middle
                给外部的块级+line-height：块级的高度
                不一定百分百生效
            块级元素在另一个块级里面纵向居中
                只能通过定位 top 50% margin-top:-自身高度的一半

        绝对居中：
            第一种：
                分开横向居中+纵向居中
                top:50%;margin-top:-自身高度的一半
                left:50%;margin-left:-自身宽度的一半
            第二种
                left:0;top:0;right:0;bottom:0;
                margin:auto

     -->