css怎么设置居中显示（8种css居中实现的详细实现方式了）

这是一篇关于居中对齐方式的总结

开篇之前  
    
    
，先问一下大家都知道几种居中的实现方式？

面试时答出来两三个就不错了

     


     


     ，就怕面试官还让你继续说  
    
    
。今天就来总结一下这些居中的方式

使用flex布局设置居中

     


     


     。 使用flex 时也能通过给子项设置margin: auto实现居中 




 




 



。 使用绝对定位的方式实现水平垂直居中  

   

   

。 使用grid设置居中

     

     

    。 使用grid时还能通过给子项设置margin: auto实现居中  




  




  


。 使用tabel-cell实现垂直居中  


  


  


。 还有一种不常用的方法实现垂直居中
     
     
   。 最后还有一种奇葩的方法
   




   




   

。容器设置position: relative 



 



 



。孩子设置 top    
    
    
、left   


     


     


、bottom



 




 




 、right都设置为0

1.flex布局设置居中

常见的一种方式就是使用flex布局设置居中             。

利用弹性布局(flex) 




 




 



，实现水平居中  

   

   

，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

给容器设置：

display: flex;写在父元素上这就是定义了一个伸缩容器

justify-content 主轴对齐方式

     

     

    ，默认是横轴

align-items 纵轴对齐方式  




  




  


，默认是纵轴

优点： 简单   

   

   
、方便    

     

     

、快速  


  


  


，三行代码搞定

    




    




    
。

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; display: flex; align-items: center; // 纵轴对齐方式
     
     
   ，默认是纵轴 子元素垂直居中 justify-content: center; //纵轴对齐方式
   




   




   

，默认是纵轴 } .child { background: red; } </style>

代码片段

2.flex-给子项设置

第一种方式是给父盒子设置属性 



 



 



，这一种是给子盒子设置margin: auto实现居中














。给容器设置 display: flex; 子项设置 margin: auto;

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; display: flex; } .child { background: red; margin: auto; // 水平垂直居中 } </style>

代码片段

3.绝对定位

使用绝对定位的方式实现水平垂直居中             。容器设置position: relative

     



     



     。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

优点就是不用关心子元素的长和宽             ，但是这种方法兼容性依赖translate2d的兼容性

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: red; } </style>

代码片段

4.tabel-cell实现垂直居中

css新增的table属性

    




    




    
，可以让我们把普通元素














，变为table元素的现实效果             ，通过这个特性也可以实现水平垂直居中

而且tabel单元格中的内容天然就是垂直居中的

     



     



     ，只要添加一个水平居中属性就好了

使用tabel-cell实现垂直居中,容器设置 display: table-cell;;

vertical-align: middle属性设置元素的垂直对齐方式

子元素如果是块级元素














，直接使用左右margin:auto实现水平居中














。如果是行内元素  
    
    
，给容器设置text-align: center

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中  
    
    
。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效

     


     


     。

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; display: table-cell; vertical-align: middle; // 设置元素在垂直方向上的对齐方式 text-align: center; } .child { background: red; display: inline-block; } </style>

代码片段

5.grid设置居中

使用grid设置居中 




 




 



。给容器设置 display: grid; align-items: center; justify-content: center;

通过给容器设置属性

     


     


     ，达到居中效果,但是这种方式兼容性较差 




 




 



，不推荐  

   

   

。

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; display: grid; align-items: center; justify-content: center; } .child { background: red; } </style>

代码片段

6.grid给子项设置

使用grid时还能通过给子项设置margin: auto;实现居中

     

     

    。给容器设置 display: grid; 子项设置 margin: auto;

某些浏览器会不支持grid布局方式  

   

   

，兼容性较差

     

     

    ，不推荐  




  




  


。

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; display: grid; } .child { background: red; margin: auto; } </style>

代码片段

7.给容器加给伪元素

这是一种不常用的方法实现垂直居中  


  


  


。给容器加给伪元素  




  




  


，设置line-height等于容器的高度
     
     
   。给孩子设置display: inline-block;

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; text-align: center; } .box::after { content: ""; line-height: 200px; } .child { display: inline-block; background: red; } </style>

代码片段

8.还有一种奇葩的方法

这个奇葩方式和第三种使用绝对定位相似  


  


  


，只不过需要给子元素设置 position: absolute; 设置固定宽度和高度;top




  




  




 、left  


  


  
、bottom     
     
     
、right都设置为0; margin设置为auto；也能实现垂直水平居中
   




   




   

。

<div class="box"> <div class="child">水平垂直居中</div> </div> <style> .box { width: 200px; height: 200px; border: 1px solid; position: relative; } .child { background: red; width: 100px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style>

代码片段

以上就是一些我们常用的垂直居中的方案 



 



 



。