最近在做一些非常基础的知识梳理，算是温习基础。这篇基本翻译自css秘密花园居中。因为我觉得这篇真的写的非常非常好了。
水平居中
1. 需要水平居中的元素为行内元素( inline, inline-block, inline-table, inline-flex)时。设置：text-align: center;
2. 需要水平居中的元素为块级元素（block）时。设置：margin: 0 auto
3. 超过一个块级元素时。可以使它们成为内联元素或使用flex。
使用flex的代码：xx {display: flex; justify-content: center;}
垂直居中
1. 需要垂直居中的元素为行内元素，同时为单行时。设置相同的上下padding，可以达到目的。当无法使用padding时，可以设置相同的height和line-height.同时将white-space: nowrap;如下：
.center {height:100px; line-height:100px;white-space:nowrap}
2. 需要垂直居中的元素为行内元素，同时为多行时。设置相同的上下padding同样可以达到目的。同时可采用vertival-align: middle.然后flexbox可以很轻松帮我们达到目的：
.flex-center {display: flex; justify-content: center; flex-direction:column;height: 400px;}
这种写法只适用于父元素的高度固定。
3. 需要垂直居中的元素为块级元素
1. 当元素的高度已知时：
2. 元素的高度未知：
3. 是否可以使用flexbox（可以使用flexbox简直可以搞定99%的居中问题，很nice）
垂直水平居中
1. 高度和宽度已知的比较简单
2. 高度和宽度未知
3. 使用flex box
4. 使用grid
参考： https://css-tricks.com/centering-css-complete-guide/
