web开发网页布局中常常会碰到各种居中，由于浏览器渲染方式的不同，因此存在很多不同的场景，本文将个人平时遇到的一些场景一一列举，以备不时之需。示例代码地址：

1.垂直居中

前提：假定父元素是盒子模型且高度已经设定。

场景一：子元素是行内元素，高度由其内容撑开

这种情况下，需要通过设定父元素的line-height为其高度来使子元素垂直居中

html代码：

     
    
      11111
     

css代码：

.wrap{
               width:200px ;            height: 200px;            border: 2px solid #ccc;            box-sizing: border-box;     }.span{
               background: red;     }.line-height{
               line-height: 200px;        }

效果:

场景二：子元素是块级元素且高度已经设定。

方法1：

计算子元素的margin-top货margin-bottom,计算方法为（父元素高度-子元素高度）/2

html代码：

     
    
      
       111111
      
     

css代码：

.wrap{
               width:200px ;            height: 200px;            border: 2px solid #ccc;            box-sizing: border-box;     }.div1{
               width:100px ;            height: 100px;            box-sizing: border-box;            background: darkblue;        }        .margin{
             margin-top: 50px;        }

效果图：

方法2：计算父元素的padding-top或padding-bottom，计算方法为（父元素高度-子元素高度）/2

html代码：

     
    
      
       111111
      
     

css代码：

.wrap{
               width:200px ;            height: 200px;            border: 2px solid #ccc;            box-sizing: border-box;     }.div1{
               width:100px ;            height: 100px;            box-sizing: border-box;            background: blue;        } .padding{
               padding-top: 50px;        }

效果图同上。

方法3：利用绝对定位，让子元素相对于父元素绝对定位

html代码：

     
    
      
       111111
      
     

css代码：

.relative{
               position: relative;        }        .absolute{
               position: absolute;            top:50%;            margin-top: -50px;        }.div1{
               width:100px ;            height: 100px;            box-sizing: border-box;            background: blue;        }.wrap{
               width:200px ;            height: 200px;            border: 2px solid #ccc;            box-sizing: border-box;     }

效果图同上

方法4：使用flexbox

flex-direction：设置或检索伸缩盒对象的子元素在父容器中的位置。

取值：row：默认值，横向从左至右排列（左对齐）。

           row-reverse：相对于row，反转横向排列。

           column：纵向排列。

           column-reverse：相对于column，反转纵向排列，最后一项在最上面。

flex生效需定义其父元素display为flex或者inline-flex。

justify-content：设置货检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

html代码：

     
    
      
       111111
      
     

css代码：

.flex{
               display: flex;            flex-direction: column;            justify-content: center;        }

以上css代码请自行加上-moz-，-webkit-。

场景三：子元素是块级元素且高度没有设定。

方法一：给父元素设定display:table-cell;vertical-align:middle。

方法二：使用flexbox，同场景二方法4。

2.水平居中

前提：父元素必须是块级盒子容器，父元素宽度已经设定好。

场景一：子元素是块级元素且宽度没有设定。

该情况下，实际上不存在水平居中一说，因为子元素会充满整个父级元素的宽度。

场景二：子元素是行内元素，子元素宽度由其内容撑开。

该情况下，给父元素设定text-align:center即可。

场景三：子元素是块级元素，且宽度已经设定。

方法一：

给子元素加上margin:0 auto;

html代码：

     
    
      
               non-child    
      
     

css代码：

.child{
               width: 100px;            height: 100px;            background: green;            box-sizing: border-box;        }        .auto{
               margin:0 auto;        }.wrap{
               width:200px ;            height: 200px;            border: 2px solid #ccc;            box-sizing: border-box;     }

效果图：

方法二：通过计算父元素的padding-left或padding-right，计算方法（父元素宽度-子元素宽度）/2

html代码：

     
    
      
               non-child    
      
     

css代码：

.padding{
               padding-left: 50px;        }

方法三：通过计算子元素的margin-left或margin-rigth，计算方法同方法三。

方法四：通过子元素相对父元素绝对定位。

html代码：

     
    
      
               non-child    
      
     

css代码：

.relative1{
               width: 300px;            height: 200px;            border: 2px solid #ccc;            box-sizing: border-box;            position: relative;        }        .absolute1{
               position: absolute;            left:50%;            margin-left:-50px;        }

效果图同上，这里还要设定子元素margin-left为-50px（子元素宽度/2）是需要消除父元素50%造成的偏移。

方法五：使用flexbox

html代码：

     
    
      
               non-child    
      
     

css代码：

.flex1{
               width: 300px;            height: 200px;            border: 2px solid #ccc;            box-sizing: border-box;            display:flex;            flex-direction: row;            justify-content:center;        }

效果同上。