元素居中的方法

元素居中的方法

垂直居中：

1. 已知元素的宽度
   inner元素的高度为100px；

/*已知高度用定位*/
 inner{
              position: absolute;
              top: 50%;  //top设置为百分比时是相对于父元素的宽度
              margin-top: -50px; //inner高度的50%
    }
outer{
                position:relative;
    }

2.未知元素的宽度

inner{
            transform: translate(0,-50%);//css3,相对于该元素本身在垂直方向上移动50%
            position: absolute;
            top: 50%;   
       }
 outer{
                position:relative;
        }

3.使用弹性盒模型

outer{
             display: flex;
             align-items: center;
        }

4.使用表格模型

outer{
             display: table-cell;
             vertical-align: middle;
         }

5:inline-block

使用line-hight属性

水平居中：
1.已知元素的宽度

inner{
            position: relative;
            left: 50%;
            margin-left: -50px;
        }

2.未知元素的宽度

inner{
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
    }
inner{
            position: relative;
    }

3.弹性盒模型

outer{
            display: flex;
            justify-content: space-around;
    }

4.inline-block

可以使用text-align属性

5.最简单的实现办法

margin: 0 auto

水平垂直居中
1:已知元素的宽度

inner{
            position:absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
       }
 outer{
            position: relative       
       }

2.未知元素的宽度

inner{      
            position:absolute;
            left: 0;
            margin: auto; //不能缺少
            top: 0;
            bottom: 0;
            right: 0;
    }
outer{
            position: relative       
      }

            css3实现：
inner{
            position:absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
}
outer{
            position: relative       
      }

3.弹性盒模型

outer{
            display: flex;
            justify-content: space-between;
            align-items: center;      
      }

4.表格模型

outer{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }