如何实现水平垂直居中

如何实现一个块级元素的水平垂直居中

1、利用 display:table-cell;属性来实现

display:table-cell;结合vertical-align: middle;使用实现垂直居中，margin:0 atuo;可以实现子元素的水平居中。

    
        
        
        
    
    
        

            

                

                    

                        垂直水平居中
                    
                
            
        
    

image.png

2、flex 弹性布局

详情查看https://www.runoob.com/w3cnote/flex-grammar.html

    
        
        
        
    
    
        

            

                水平垂直居中
            
        
    

image.png

3、利用绝对定位，让元素脱离普通文档流，再结合margin：auto。

4、absolute+margin 通过计算元素宽高实现居中

让子元素居中时，margin必须要知道子元素的宽高，切忌不能用百分比。

5、absolute + translate ，通过translate将元素移动自身的50%,50%，实现水平垂直居中。

translate(-50%,-50%) 属性：向上（x轴）和左（y轴），移动自身长宽的 50%，使其居于中心位置。
top: 50%;left: 50%;：是以窗口左上角为原点，需要减掉自身宽高的一半，才能居中。
与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比。

个人推荐用2、3方法，
flex布局法适合在局部使用。
绝对定位适合在全屏场景使用，比如弹框中。

一个人至少拥有一个梦想，有一个理由去坚强。心若没有栖息的地方，到哪里都是在流浪。