居中方法总结

水平方向上

1.针对inline, 内联块inline-block

.text_div{
    text-align:center;
}

2.不定宽块状元素居中

.text_div{
    margin:0 auto;//且需要设置父级宽度
}
3.flex布局
.text_div{
    display：flex;
    justify-content:center;
}

垂直居中

单行内联(inline-)元素垂直居中

1.通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{
    height: 120px;
    line-height: 120px;
}

2.利用表布局

.father {
    display: table;
}
.children {
    display: table-cell;
    vertical-align: middle;
     text-align: center; 
}

3.flex布局

.center-flex {
    display: flex;
    flex-direction: column;//上下排列(ie不支持)
    justify-content: center;
}

4.绝对布局方式

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

垂直水平居中根据上方结合

1.flex方式

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

grid方式

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}