【CSS】详解元素水平居中/垂直居中的方案

各类元素居中的方案

注意，下述的水平居中和垂直居中的方案的第2、3、4点原理和方案均是类似的，水平居中和垂直居中的方案主要在于其行内级元素的居中方式不同，以及垂直居中可以通过带宽度的块级元素使用margin完成。

水平居中

0. 行内级元素使用text-align：

   .outside{
       text-align:center
   }
   

   适用于行内级元素以及文本。

1. 使用flex布局：

   .outside{
       display:flex;
       justify-content:center
   }
   

   会使得容器变为flex container，进而影响到所有容器内所有子元素，适用于容器本身就需要flex布局的情况。

3. 带宽度的块级元素使用绝对定位：

   .outside{
       position:relative;
   }  
   .inside{
       position: absolute;
       left: 0;
       right: 0;
       width: 100px;
       height: 100px;
       margin: 0 auto;
     }
   

   这种方法有点复杂，会脱标且必须设置元素宽高。适用于本来就需要绝对定位进行布局的元素。

4. 块级元素使用相对定位+translate

   .inside{
       position: relative;
       left: 50%;
       transform: translateX(-50%)
   }
   

   这种方式较为推荐。

5. 带宽度的块级元素使用margin：

   .inside{
       width: 100px;
       height: 100px;
       margin: 0 auto;
   }
   

垂直居中

0. 文本居中：

   .inside{
       height: 30px;
       line-height: 30px;
   }
   

1. 使用flex布局：

   .outside{
       display: flex;
       align-items: center;
   }
   

   会使得容器变为flex container，进而影响到所有容器内所有子元素，适用于容器本身就需要flex布局的情况。

2. 带宽度的块级元素使用绝对定位：

   .outside{
       position:relative;
   }  
   .inside{
       position: absolute;
       top: 0;
       bottom: 0;
       width: 100px;
       height: 100px;
       margin: auto 0;
     }
   

   这种方法有点复杂，会脱标且必须设置元素宽高。适用于本来就需要绝对定位进行布局的元素。

3. 块级元素使用相对定位+translate：

   .inside{
       position: relative;
       left: 50%;
       transform: translateX(-50%)
   }
   

   这种方式较为推荐。