开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
背景
今天，来谈一个老生常谈的问题css居中。因为这是所有前端都会用到的。可能入职第一天就会写到的东西。这样经典实用的的技术，很值得拿来写一篇文章。
水平居中
水平居中的情况，又是居中最常见的一种。可以实现该现象的有如下：
- text-align，但是
text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。 - margin: auto 居中，这里需要块状元素，也就是
display: block, 这种情况下必须有margin: 0 auto。 - padding填充，利用
padding和background-clip配合实现div的水平垂直居中。 - translate(-50%,-50%)，用
position加translate(-50%,-50%)比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。 - 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
- flex，只需要设置display:flex;align-items: center;
垂直居中
- flex布局。
- 定义line-height。
- position + margin:auto，父容器相对定位，子容器绝对定位并且上下左右设置为0，margin设置为auto。
- position + margin负边距，父容器相对定位，子容器绝对定位，left为50%，top为50%，margin-left为子容器宽度的一半，margin-top为子容器高度的一半。
- position + transform，父容器相对定位，子容器绝对定位，left为50%，top为50%，translate(-50%,-50%)。
总结
综上所述，我们知道了水平垂直居中的方式，可以说千方百计，根本就是数不胜数。并且我相信，随着技术的不断进步，以后有更多的方式去实现居中。甚者会更简单的实现。尽管如此，也希望文本的总结给到大家帮助。
