前几天面试，遇到了一个面试题，关于如何水平，垂直，水平垂直居中的问题，自己答案，写的不是太好，今天就总结一下。

---

(一)水平居中

（1）块元素 > 行内元素居中

这种情况比较简单直接上代码

       
     
                    
      
       inner       
      
     

#outer{       text-align:center;       background-color:#666;       width:200px;//有无宽度，均可} #inner{       color:#fff;       font-size:20px;       background-color:red;}

效果如下：

---

（2）块元素 > 块元素居中

1）宽度一定时,利用margin: 0 auto

     
                    
      
       inner       
      
     

#outer{       background-color:#666;       width:200px;//有无宽度，均可} #inner{       color:#fff;       font-size:20px;       background-color:red;       width:100px;       margin:0 auto;}

效果如下：

---

2）宽度未定时，利用display: inline-block与text-align:center;

       
     
                    
      
       inner       
      
     

#outer{       text-align:center;       background-color:#666;       width:200px;//有无宽度，均可} #inner{       color:#fff;       font-size:20px;       background-color:red;       display:inline-block;       /*display:inline; *//*变成行内元素，会失去padding,margin上下，以及宽高设置，不建议使用*/}

效果如下：

---

3）多个div

       
     
                    
      
       inner              
       
        inner2              
        
         inner3       
        
       
      
     

#outer{       text-align:center;       background-color:#666;       width:200px;//有无宽度，均可} #inner,#inner2,#inner3{       color:#fff;       font-size:20px;       background-color:red;       display:inline-block;       /*display:inline; *//*变成行内元素，会失去padding,margin上下，以及宽高设置，不建议使用*/}

效果如下：

---

（二）水平垂直居中

1.块元素> 块元素

（1）无视宽高，利用table-cell

       
     
                    
      
       inner       
      
     

#outer{       text-align:center;       background-color:#666;       width:200px;       height:200px;       vertical-align:middle;       display:table-cell;} #inner{       color:#fff;       font-size:20px;       background-color:red;       display:inline-block;}

效果如下：

---

（2）绝对定位（未知高度）

     
                    
      
       inner       
      
     

#outer{       background-color:#666;       width:200px;       height:200px;       position:relative;} #inner{       color:#fff;       font-size:20px;       background-color:red;       position:absolute;       top:0;       bottom:0;       right:0;       left:0;       margin:auto;       width:60px;//宽度，高度均要有，不然inner元素会被拉伸直到铺满父元素       height:60px}

效果如下：

---

（3）绝对定位（已知高度）

       
     
                    
      
       inner       
      
     

#outer{       background-color:#666;       width:200px;       height:200px;       position:relative;} #inner{       color:#fff;       font-size:20px;       background-color:red;       position:absolute;       top:50%;       left:50%;       width:60px;       height:60px;       margin-left:-30px;

效果如下：

---

2.div块元素>span行内元素

     
                    
      
       inner       
      
     

#outer{         background-color:#666;       width:200px;       height:200px;       display:table-cell;//关键点，然后设置下面的vertical,text-align       vertical-align:middle;              text-align:center;} #inner{       color:#fff;       font-size:20px;       background-color:red;}

或者

#outer{         background-color:#666;       width:200px;       height:200px;       line-height:200px;//关键点              text-align:center;} #inner{       color:#fff;       font-size:20px;       background-color:red;}

效果如下：

---

3. 利用Css3显威力(inner宽度已知，未知均可)

       
     
                    
      
       inner       
      
     

#outer{       background-color:#666;       width:200px;       height:200px;       position:relative;} #inner{       color:#fff;       font-size:20px;       background-color:red;       position:absolute;       top:50%;       left:50%;   transform: translate(-50%, -50%);}

效果如下：

---

4  flexBox（inner宽度已知，未知均可）

     
                    
      
       inner       
      
     

#outer{       background-color:#666;       width:200px;       height:200px;       display:flex;       justify-content:center;       align-items:center;} #inner{       color:#fff;       font-size:20px;       background-color:red;}

效果如下：

目前就发现了这么多，后续不断完善中。