原文地址：CSS各种居中实现方式

CSS居中是每次布局都需要面对的问题，但是同一个居中方法并不是任何元素都能使用的，内联元素和块级元素的居中方式各不相同，下面我就对它们分别进行讨论和总结。

内联元素

---

内联元素的特点

• 和其他元素都在一行上
• 设置高度height 无效，可以通过line-height来设置
• 设置margin和padding只有左右有效，上下无效
• 宽度就是它的文字或图片的宽度，不可改变
• 内联元素只能容纳文本或者其他内联元素

以下实例都是基于下面的html代码：

        <div class="out">
            <span class="in">
                居中元素
            </span>
        </div>

水平居中

1. 父元素样式设置为text-align:center，里面包含的行内元素居中,如果父元素内部还存在包含文字且不定宽的块元素，那么这个块元素也会居中。

        .out{
             text-align: center;
            }
   

2. 父元素样式设置为display:flex; justify-content:center，里面包含的行内元素居中。

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

垂直居中

1. 单行文本：可将其父元素的高度和行高设置为相等的值 height = line-height

        .out{
           height: 100px;
           line-height: 100px;
        }
   

2. 多行文本：用一个span标签将所有的文字封装起来，再用一个容器包裹span，设置属性display: table-cell;vertical-align: middle。这种方法同样适用于使图片居中。

       .out{
           display: table-cell;
           vertical-align: middle;
        }
   

3. 父元素样式设置为display:flex; align-items: center，里面包含的行内元素居中。

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

块级元素

---

块级元素的特点

• 总是在新行上开始，占据一整行
• 高度，行高以及外边距和内边距都可控制
• 宽度缺省是它的容器的100%，除非设定一个宽度
• 它可以容纳内联元素和其他块元素

以下实例都基于下面的html代码：

        <div class="out">
            <div class="in">
                居中元素
            </div>
        </div>

水平居中

定宽块级元素水平居中

1. 父元素样式设置为display:flex; justify-content:center，则里面包含的块元素居中

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

2. 该元素样式设置为 margin：0 auto；

          .in{
            width: 100px;  
            margin: 0 auto;
        }  
   

3. 该元素样式设置为 position: relative;left: 50%；margin-left: -0.5*width（负的该元素宽度的一半）

          .in{
            width: 100px;
            position: relative;
            left: 50%;
            margin-left: -50px;
        }
   

4. 上述方法把relative改为absolute也同样适用，根据实际情况选择适合自己的方法。

         .in{
            width: 100px;
            position: absolute;
            left: 50%;
            margin-left: -50px;
        }
   

不定宽块级元素水平居中

1. 对于包含文字的块元素可将其父元素设置为text-align:center

        .out{
           text-align:center;    
        }
   

2. 若不包含文字，可把该块级元素变成行内元素，即设置display:inine，再给其父元素设置text-align:center

        .out{
           text-align:center;    
        }
        .in{
           display:inine;    
        }
   

3. 父元素样式设置为display:flex; justify-content:center，则里面包含的块元素居中

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

4. 该元素样式设置为 position: absolute;left: 50%;transform: translate(-50%,0)

        .in{
           position: absolute; 
           left: 50%;  
           transform: translate(-50%,0);
        }
   

垂直居中

定高块级元素垂直居中

1. 父元素样式设置为display:flex; align-items: center，则里面包含的块元素居中

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

2. 该元素样式设置为 position: relative;top: 50%；margin-top: -0.5*height（负的该元素高度的一半）

        .in{
           height:100px;
           position: relative; 
           top: 50%;  
           margin-top:-50px;
        }
   

3. 该元素的父元素的position值设置为relative，将该元素样式设置为position: absolute;top:50%;margin-top: -0.5*height

        .out{
             position: relative;    
          }
        .in{
             height:100px;
             position: absolute; 
             top:50%;   
             margin-top: -50px
          }
   

4. 该元素的父元素的position值设置为relative，将该元素样式设置为position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;

        .out{
            position: relative;    
         }
        .in{
            height:100px;
            position: absolute; 
            top:0;   
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
         }
   

不定高块级元素垂直居中

1. 父元素样式设置为display:flex; align-items: center，则里面包含的块元素居中

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

2. 该元素样式设置为 position: relative;top: 50%;transform: translate(0,-50%)

        .in{
            position: relative;
            top: 50%;
            transform: translate(0,-50%);
        }
   

3. 该元素的父元素的position值设置为relative，将该元素样式设置为position: absolute;top:50%;translate(0,-50%)

        .out{
             position: relative;
           }
        .in{
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
          }
   

---

小结

• 总结到这里就会发现令元素居中的办法千奇百怪，其中无论水平还是垂直，无论有没有指定宽高，总能奏效的办法就是display:flex办法，这也是flex布局的优势之一，有时候使用flex布局甚至比bootstrap这种框架更加顺手，有机会我也会对flex做个总结。
• 另外在上面的很多居中的办法中都用到了position: absolute，但是其实不建议经常使用绝对定位进行布局，因为它脱离了文档流，有时会造成元素的塌陷。因为关于position的不同取值带来的效果经常使人困扰，后面我也会对它进行总结。
• 还有，居中的办法有这么多，但并不代表你需要懂得每一种，甚至去学会一些奇怪或者复杂的居中方式，而是在布局的过程中选择最适合、最简单、你用的最顺手的方法实现你想要的效果，俗话说黑猫白猫，能抓住耗子的就是好猫，居中方式也是一样的道理。