#水平居中

1.1.已知宽度块元素宽度 :

.child {
    width: 1000px;
    margin: 0 auto;
}

1.2.文本内容居中:

.parent {
    text-align: center;
}

1.3.通过表格:

.child {
    display: table;
    margin: 0 auto;
}

1.4.已知宽度,通过设置position:absolute,margin-left为宽度的负一半

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    width: 150px;
    margin-left: -75px;
}

1.5.未知宽度,通过设置position:absolute

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

1.6.使用flex布局实现（兼容性不好，感觉有点变成浮动的效果，不在文档流）

第一种：

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

第二种：

.parent {
    display: flex;
}
.child {
    margin: 0 auto;
}

#垂直居中

2.1.文本垂直居中

.child {
    height: 20px;
    line-height: 20px
}

2.2.vertial-align:middle;

第一种方法：

.parent {
    display: table-cell;
    vertical-align: middle;
    height: 20px;
} 

第二种方法：

.parent {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}

2.3.未知高度，设置position:absolute

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

2.4.已知高度，设置position:absolute,margin-top为高度的负一半

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 150px;
    margin-top: -75px;
}

2.5.使用flex布局实现

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