为什么垂直居中比水平居中难？

1、为什么垂直居中比水平居中难？

CSS默认文档流是从左至右、自上而下的，块元素天然撑满父元素或设置相应的宽度，水平居中通过marign:0 auto即可快速实现；但是垂直方向默认根据内容流延申，没有天然的属性，所以需要通过布局干预实现。

2、垂直居中分类：单行文本、多行文本、文本+图标、块元素

2.1、单行文本的垂直居中

复制代码

.parent{
  height:50px;
  line-height:50px;
}

踩坑点：
1、文字加了padding/margin会导致垂直偏移，需抵消；
2、字体大小与line-height的比例：如font-size:16px，line-height:24px时，文字实际居中的间隙是上下各 4px，需根据设计稿调整。

2.2、多行文本的垂直居中

按照优先顺序依次可使用：flex、table-cell（兼容低版本ie浏览器）、定位+trabslate（脱离文档流的场景）

复制代码

.parent-flex{
  display:flex;
  align-items: center;
}
.parent-tablecell{
    display: table-cell;
    vertical-align: middle;
}
.parent-position{
    position: relative;
 }
 .parent-position__inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2.3、文本+图标的垂直居中

图标设置vertical-align: middle;display:inline-block;实现

2.4、块元素的垂直居中

flex、grid、table-cell、定位+translate、定位+margin

复制代码

.parent-margin{
    width:200px;
    height:200px;
    position: relative;
}
.parent-margin__inner{
/*子元素需要固定宽高*/
    width:100px;
    height:100px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

2.4.1、场景区分-父元素宽高明确

以上方案都可用踩坑点：
1、如果使用定位+margin，子元素宽高也需要固定，否则会占满整个父元素；

2.4.2、场景区分-父元素宽高不明确

可用：felx、grid、table-cell。踩坑点：

1、使用table-cell会改变元素的文档流，的元素无法和兄弟元素通过float/inline-block实现横向布局，可在外层套一个元素实现。
2、flex和grid的布局维度：flex适合单行/单列的布局，grid适合多行多列的布局。

复制代码

/*示例代码*/
.parent-grid{
    display: grid;
    place-items: center;
}