css 总结笔记｜居中篇

    最近在做一些非常基础的知识梳理，算是温习基础。这篇基本翻译自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. 当元素的高度已知时：

center1

            2. 元素的高度未知：

center2

            3. 是否可以使用flexbox（可以使用flexbox简直可以搞定99%的居中问题，很nice）

垂直水平居中

              1. 高度和宽度已知的比较简单

center4

            2. 高度和宽度未知

            3. 使用flex box

            4. 使用grid 

参考： https://css-tricks.com/centering-css-complete-guide/