css 垂直水平居中

本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~

你知道CSS实现水平垂直居中的第10种方式吗？

常用的有两个：

1. flex

display: flex;
justify-content: center;
align-items: center;

2. transform

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);