如何实现垂直居中

如果父元素没有设置height

• 那么只需要设置将parent部分设置padding

如果把父元素的height写死了

用div模拟table

父级元素

• 用display:table-cell
• 用vertical-align:middle
• 用text-align:center让子级的行内元素居中

子级元素

• display:inline-block

margin:auto和设置偏移

• 父级设置position:relative

• 子级设置positon:absolute

  • top/right/left/bottom全部设置为0，如果子级没有设计宽高，子级会占满整个父级。因为这四个位置，是相对于父级而设置的

  • 然后设置宽高，子级会按照我们的设置来显示。但子级的虚拟占位，依然是撑满了了整个父级

  • 然后margin:auto，它就会上下左右都居中了

根据父级元素设置负margin

• 父级元素相对定位

• 子级元素绝对定位

• 设置top/left

• 然后设置marin-left和margin-top

  • 负的具体px
  • 负的比例

  
    
    
  
  
  
    

      

        一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      
    
  

使用transform:translate

  
    
    
    
  
  
    

      

        一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      
    
  

使用flex布局

• 父级元素

  • display:flex
  • justify-content:center
  • align-items:center

  
    
    
    
  
  
    

      

        一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      
    
  

使用grid

• 父级用display:grid

• 子级

  • align-self:center
  • justify-self:center

  
    
    
    
  
  
    

      

        一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字