一、水平居中方法

1.行内元素、字体的水平居中

1.对于行内元素（display值为inline或inline-block都可以）或者字体：父元素添加css规则：text-align：center;

    
I am ry
    
    
    
     
1
    
     
2
    
     
3
    
     
4
    

2.块元素的水平居中

1.使用margin实现水平居中

将margin-left 和 margin-right 设置为auto，块元素将会自动匹配适应，实现水平居中

2.使用position+margin-left实现水平居中

定位后，设置left先整体偏移父容器的一半，再使用负margin-left自己一半的宽度，从而子元素中心对准父元素中心。

3.如果是多个块元素在同一水平线居中排列，则将其display设置成inline-block，还有一种是使用flexbox的布局方式来实现。

块元素设置了inline-block后，拥有行内元素并排特点，只要父元素设置text-align即可使其水平居中。

二、垂直居中

1.行内元素或者文字（单行情况）

1.可以直接使用line-height属性来设置: 将line-height设置成和height一样即可

    
    
             we dont talk anymore    
    

2.使用padding（top,bottom）通过增加内边距来实现垂直的居中

 
    
     确认过眼神，我遇上对的人
    

2.行内元素或者文字（多行情况）

1.照样可以使用padding（top 和 bottom）

2.对父元素设置display:table-cell 和 vertical-align:middle

    
    
        
     how to love
     
        
     I knoe I need somebody
     
        
     I know I need somebody
     
        
     pary for me    
    

3.块元素垂直居中

1.确定宽高的情况

使用position 和 margin-top配合

    
    
             parent        
     
                  child        
     
    
    

2.对于未知宽高的

使用transform 的 translateY(-50%) 向上平移自身一半

    
             parent2    
     
      child2
     
    

3.使用flex布局

三、水平且垂直居中

1.position 和 margin 配合

2.使用flex布局

同时设置两条居中属性 justify-content 和 align-items

本篇是个人笔记，可经常看看。向前走，也别忘记要多回顾

确认过眼神，我遇上对的人

Ry（元）