CSS--居中方式总结

一、水平居中方法

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（元）

转载于:https://www.cnblogs.com/Ry-yuan/p/8474206.html