CSS3实现盒子水平垂直居中的方法总结

应用场景

网页中有很多需要让元素居中的地方，例如，登录、注册表单需要在页面中居中，一张图片在元素中居中，文字在元素中居中等。
元素居中在构建网页中经常用到，由于元素本身的特性不同以及设置的属性的差异，居中的方式也不一样。

方案

1. 该方法使用弹性盒进行水平垂直居中

 .app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: flex;
    align-items: center;
    justify-content: center;   
}
.app>div{
    width: 100px;
    height: 100px; 
    font-size: 20px;
    background: blueviolet;				
} 

2. 该方法利用定位和margin进行水平垂直居中

.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: auto;
}

3. 该方法利用定位和平移进行水平居中

.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
    
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

4. 高度就是文字加line-height的高度 局限性在于必须里边的元素是inline否则不生效

.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    line-height: 500px;
    text-align: center;
}
.app>div{
    width: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;				
} 

5. 横向利用margin auto，垂直还是利用定位和平移

.app{
    width: 500px;
    height: 500px;
    background: greenyellow;								
}
.app>div{
    width: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right:auto ;
}

6. 最不推荐的方案 通过计算padding 一旦内部元素改变了高度或者宽度,会影响元素的位置

.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    box-sizing: border-box;
    padding-left: 200px;
    padding-top: 200px;											
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	 
}

7. 将元素设置为行内盒，使用text-align和line-height使其水平垂直居中，该方法也适合行内元素

.app{
    width: 500px;
    height: 500px;
    background: greenyellow;		
    text-align: center;
    line-height: 500px;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;			
}

8. 使用grid布局

.parent{
    display: grid;
    grid-template-columns:100px;
    grid-template-rows:100px;
    align-items:center;
    justify-content: center;
    background-color:red;
}
.child{
   background-color:blue;
}

   <div class="parent">
        <div class="child">12</div>
    </div>