最近經常碰到要垂直居中的問題，所以想著總結一下：關於如何設置小盒子在大盒子裏面水平垂直方向同時居中的實現方法有很多種，下面僅列舉了常用的幾種。

　　首先看一下要實現的效果圖及對應的html代碼：

<div class="parent">
    <div class="child">           
    </div>
</div>

1、使用定位的方法

.parent {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    position:relative;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid violet;
    position:absolute;
    top: 
 
50%;
    left:50%;
    margin-top: -50px;     /*這裏是小盒子高的一半*/
    margin-left: -50px;    /*這裏是小盒子寬的一半*/
}

　　還有就是子元素寬高不固定時

//vertical center
.vertical-center{
  position absolute
  top 50%
  transform translate(0,-50%)
}
.vertical-horizontal{
  position absolute
  left 50%
  top 50%
  transform translate(-50%,-50%)
}
 

2、利用定位及margin:auto實現

.parent {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    position:relative;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid violet;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

　　實現原理是設置margin自動適應，然後設置定位的上下左右都為0,就如四邊均衡受力從而實現盒子的居中;

3、使用display:table-cell;

.parent {
　　width: 300px;
　　height: 200px;
　　border: 1px solid red;
　　display: table-cell;
　　vertical-align: middle;
　　text-align: center;
}
.child {
　　width: 100px;
　　height: 100px;
　　border: 1px solid violet;
　　display: inline-block;
}

　　實現原理：display:table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似於td標簽；組合使用vertical-align、text-align，可以使父元素內的所有行內元素水平垂直居中（也就是將內部的元素設置display:inline-block）

4、使用伸縮布局display:flex

.parent {
　　width: 300px;
　　height: 200px;
　　border: 1px solid red;
　　display: flex;
　　justify-content: center;  /*水平居中*/
　　align-items: center;      /*垂直居中*/
}
.child {
　　width: 100px;
　　height: 100px;
　　border: 1px solid violet;
}

總結div裏面水平垂直居中的實現方法