div水平垂直居中的方法

方法一：

绝对定位方法：不确定当前div的宽度和高度，采用transform:transalte(-50%,-50%); 当前div的父级添加 相对定位(position:relative;)

.div{

position: absolute;

left:50%;

top:50%;

transform: translate(-50%, -50%);

}

方法二：

绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

.div{

width: 600px;

height: 600px;

background: red;

left:50%;

top: 50%;

margin-left: -300px;

margin-top:-300px;

}

方法三：

绝对定位方法：绝对定位下top left right bottom 都设置0

.div{

position:absolute;

left: 0;

top: 0;

bottom: 0;

right: 0;

margin: auto;

}

方法四：

flex布局方法：当前div的父级添加 flex css样式.

.box{

display: flex;

align-items: center;

justify-content: center;

}

方法五：

table-cell实现水平垂直居中：table-cell middle center组合使用

.table-cell {

display: table-cell;

vertical-align: middle;

text-align: center;

}

方法六：

绝对定位：calc()函数动态计算实现水平垂直居中

---Every day to be a little better---