垂直居中，绝对的垂直居中，上代码

标题

一、
display: flex;
justify-content: center;//元素在主轴上对齐
align-items: center;//元素在交叉轴上对齐

    
    
    
    
    



       
    

        

            
文章
            123
            
xxx
        
        
没有class的
    

在div里面块级和行内级都被水平居中了
效果图：

在这里插入图片描述

二、
display:flex;
height: 500px;
width: 100%;

这里是引用

 

        
1234
            
12355
            xxx
            aaa
        
    

在div里面块级和行内级正常使用，元素都被垂直居中
效果图：

** transform: translate(-50%, -50%);会在整个屏幕居中**

如果需要在某个div里面居中的， 那这个div 需要设置高,即设置为 position: absolute;的父类。

css:
.absolute {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        

            
111
                
222
                333
            
            
444
            555
        

        
        
xxxxx
    

效果图：

*margin: -50px 0 0 -50px; (取宽度高度的 一半)

如果需要在某个div里面居中的， 那这个div 需要设置高,即设置为 position: absolute;的父类。

css:
.absolute {
           position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px; 
        }
 

            
111
                
222
                333
            
            
444
            555
        

效果图：同上