css实现居中

1.水平居中

1.1内联元素

.center-text {
    text-align: center;
 } 

1.2块级元素

.center-block {
  margin: 0 auto;
}

1.3多块级元素水平居中（ 如果一行中有俩个或俩个以上的块级元素，通过设置块级元素的显示类型为inlink-block和父级元素的text-align属性使得多块级元素水平居中）

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

1.4利用display：flex

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

2.垂直居中

2.1单行内联元素垂直居中

#v-box {
    height: 120px;
    line-height: 120px;
}

2.2利用表布局的vertical-align：middle可以实现子元素的垂直居中

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

2.3利用flex布局

.center-flex {
    display: flex;
    flex-direction: column;定义主轴方向为纵向
    justify-content: center;
}

2.4块级元素垂直居中--固定高度的块级元素（通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半就可以实现垂直居中了）

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

2.5块级元素垂直居中--不固定高度的块级元素（宽度和高度未定的时候，可以借助css3中的transform属性向y轴反向偏移50%的方法实现垂直居中，但是部分浏览器存在兼容应问题）

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

3.水平垂直居中

3.1固定宽高元素水平垂直居中（通过margin平移元素整体宽度的一半，使元素水平垂直居中）

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

3.2未知宽高元素（利用2d转换，在水平和垂直俩个方向都向方向平移宽高的一半，从而使得元素水平垂直居中）

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.3利用flex布局

.parent {
    display: flex;
    justify-content: center;//主轴横轴方向上的对齐方式
    align-items: center;定义flex子项在flex容器的当前行的测轴（纵轴）方向上的对齐方式
}

3.4屏幕上的水平垂直居中 例如 登录注册 要保证良好的兼容性还需要用到表布局

/方法一/

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}

/方法二/

.element{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}