五花八门实现元素居中

骑猪看日落 2022-06-15 12:56 184阅读 0赞

这篇文章很早就想写了，一直拖到现在，终于动手了，哈哈；

### 水平居中 ###

1.  **行内元素**：在其父元素上设置 text-align:center;  
    
2.  **单个块级元素**: 设置width以及margin:0 auto；  
    
3.  **多个块级元素实现水平居中**：  
    (1)为这些块级元素设置display:inline-block属性，其父元素设置：text-align:center ;  
    (2)利用flexbox布局:在这些块级元素的父元素上设置display:flex;justify-content:center;  
    注意：一般的浏览器设置：display:-webkit-flex;display：flex;对于IE浏览器需设置display：-ms-flexboxcss样式;

### 垂直居中 ###

1.  单行的行内元素 设置子元素的line-height等于父元素的height;  
    
2.  多行的行内元素:  
    (1) 针对非IE浏览器 组合使用table-cell和vertical-align：middle ;  
    (2)针对IE浏览器 利用font-size;  
    
3.  已知div的高度和宽度：在子元素上设置position：absolute；top:50%;left:50%;再利用margin-top:-height/2;和margin-left:-width/2;再稍微调整；  
    
4.  利用table实现垂直居中 table元素作为父级元素添加 align=”middle”;
    
    ### 垂直水平居中 ###
5.  单行的行内元素 :  
    （1）图片元素： 设置vertical-align:middle;  
    （2）文字 ：在父元素上设置text-align:center;自身设置line-height:为父元素的高度;  
    （3）图片与文字都有： 父元素设置display:table-cell; vertical-align:center; text-algin:center;  
    （4）对表格元素td使用vertical-align:middle可对其内的元素进行垂直居中，对父元素使用display:table-cell;vertical-align:middle;也可实现对元素的垂直居中，且该种方法无论行内元素还是块元素均可使用；  
    
6.  块级元素:  
    (1)单个块级元素（绝对定位+margin)：父元素设置position：relative;自身设置position:absolute;top:50%;left:50%;margin-top:-（为自身的高度的一般;margin-left:-(为自身宽度的一半);  
    3.利用css3实现垂直水平居中:  
    (1)flex布局实现水平居中:（适用于块级元素与行内元素的单个元素或多个）实现水平居中：在父元素上设置 display:flex;justify-content:center;  
    (2)利用transform实现垂直水平居中:在父元素上设置position: relative;在子元素上设置transform:translate(-50%,-50%)；position:absolute;top:50%;left:50%；