css实现水平垂直居中的几种方法

笔记学习整理

css垂直水平居中分为：

• 定宽居中
  方法①absolute+负margin
  ②absolute+margin:auto
  ③absolute+calc
  ④ min-height: 100vh+flex+margin:auto
• 不定宽居中
  ①absolute + transform
  ②lineheight
  ③writing-mode
  ④css-table
  ⑤flex
  ⑥grid

一、定宽居中

1、定宽居中(absolute+负maigin)

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

2、定宽居中(absolute+maigin:auto)

position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

    
    
    
    
    
    
    
    



    

        

            子元素定宽高
        
    

3、定宽居中(absolute+calc)

position:absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);

    
    
    
    
    
    
    
    



    

        

            子元素定宽高
        
    

4、定宽居中（min-height: 100vh+flex+margin:auto）

二、不定宽居中

1、不定宽高居中：absolute+transform（依赖translate 2d的兼容性）

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

    
    
    
    
    
    
    
    



    

        

            子元素不定宽高
        
    

2、不定宽高居中：lineheight

    
    
    
    
    
    
    
    



    

        

            子元素不定宽高
        
    

3、不定宽高居中

    
    
    
    
    
    
    
    



    

        

            子元素不定宽高
        
    

4、不定宽高居中flex

    
    
    
    
    
    
    
    



    

        

            子元素不定宽高
        
    

5、不定宽高居中grid (css3网格系统grid兼容性不如flex 不推荐使用)

display: grid;
justify-self: center;
align-self: center;

    
    
    
    
    
    
    
    



    

        

            子元素不定宽高
        
    

这边通过网上学习，总结了以上几种方法，便于日后遗忘。