【CSS】水平居中、垂直居中、水平垂直居中

总结

1. 水平居中

（1）使用 text-align：把父元素设置为：text-align: center

         该方法均适用于行内元素、行内块元素、块级元素。

         注意：如果块级元素设置了宽度，则需要把块级元素设置为行内元素或行内块元素：display: inline 或 display: inline-block；

（2）使用 margin：把元素设置为：margin: 0 auto

         注意：使用该方法，必须设置元素的宽度 width，否则无效。

         如果是行内元素或行内块元素，需要将其设置为块级元素：display: block；

         如果是块级元素，无需再做改动。

（3）使用 position 和 transform：

         把父元素设置为：position: relative；

         把元素设置为：position: absolute；left: 50%；transform: translateX(-50%)

                                  或者把 transform: translateX(-50%) 替换为 margin-left：- 元素宽度的一半px（注意有负号）

         该方法均适用于行内元素、行内块元素、块级元素。此时，块级元素表现的就像行内块元素一样。

         注意：行内元素无法设置宽高，它的宽高由其内容的宽高决定，只能使用 transform 实现。

                    块级元素和行内块元素如果不设置宽高，他们的宽高由其内容的宽高决定，只能使用 transform 实现；如果设置了宽度，还能使用 margin-left 实现。

（4）使用 flexbox 布局：把父元素设置为：display: flex；justify-content: center

         该方法均适用于行内元素、行内块元素、块级元素。此时，块级元素表现的就像行内块元素一样。

         注意：行内元素无法设置宽高，它的宽度由其内容的长度决定；高度由父元素的高度决定。

                    块级元素和行内块元素如果不设置宽高，他们的宽度由其内容的长度决定；高度由父元素的高度决定。

2. 垂直居中

（1）使用 padding：把父元素设置为：padding：任意值px  0

         该方法均适用于行内元素、行内块元素、块级元素。

         注意：该方法适用于父元素没有设置具体高度的情况。                  

（2）使用 line-height：

          该方法均适用于行内元素、行内块元素、块级元素。

• 单行 —— 把父元素的 line-height 属性值与 height 属性值设置为相等

       注意：当元素中有 p 元素时，最好再将该元素设置为 margin：0 。

• 多行 ——  把父元素的 line-height 属性值与 height 属性值设置为相等

       添加元素设置为：line-height: 1.5 ；display: inline-block ；vertical-align: middle

（3）使用 position 和 transform：

         把父元素设置为：position: relative；

         把元素设置为：position: absolute；top: 50%；transform: translateY(-50%)

                                  或者把 transform: translateY(-50%) 替换为 margin-top：- 元素高度的一半px（注意有负号）

         注意：该方法均适用于行内元素、行内块元素、块级元素。此时，块级元素表现的就像行内块元素一样。

                    行内元素无法设置宽高，它的宽高由其内容的宽高决定，只能使用 transform 实现。

                    块级元素和行内块元素如果不设置宽高，他们的宽高由其内容的宽高决定，只能使用 transform 实现；如果设置了宽度，还能使用 margin-top 实现。

（4）使用 flexbox 布局：把父元素设置为：display: flex；align-items: center

         注意：该方法均适用于行内元素、行内块元素、块级元素。此时，块级元素表现的就像行内块元素一样。

                    行内元素无法设置宽高，它的宽高由其内容的宽高决定。

                    块级元素和行内块元素如果不设置宽高，他们的宽高由其内容的宽高决定。

（5）使用 table：把父元素设置为：display: table;

                             把子元素设置为：display: table-cell; vertical-align: middle;

         该方法适用于行内元素和块级元素，但不适用于行内块元素。         

         注意：如果只有一个元素，该元素将会覆盖整个父元素，且设置的宽高将不再起作用。

                   如果不只一个元素，且所有元素的宽度和不会超过父元素的宽度时，那么块级元素的宽度会起作用，否则还是不起作用。          

3. 水平垂直居中

（1）使用 padding：在垂直居中的基础上，把父元素设置为：text-align: center

（2）使用 line-height：在垂直居中的基础上，把父元素设置为：text-align: center

（3）使用 position 和 transform：

         把父元素设置为：position: relative；

         把元素设置为：position: absolute；left: 50%；top: 50%；transform: translate(-50%, -50%)

                    或者把 transform: translate(-50%, -50%) 替换为 margin：- 块级元素高度的一半px  0  0  - 块级元素宽度的一半px

         注意：该方法均适用于行内元素、行内块元素、块级元素。此时，块级元素表现的就像行内块元素一样。

                    行内元素无法设置宽高，它的宽高由其内容的宽高决定，只能使用 transform 实现。

                    块级元素和行内块元素如果不设置宽高，他们的宽高由其内容的宽高决定，只能使用 transform 实现；如果设置了宽度，还能使用 margin 实现。

（4）使用 flexbox 布局：把父元素设置为：display: flex；justify-content: center；align-items: center

         注意：该方法均适用于行内元素、行内块元素、块级元素。此时，块级元素表现的就像行内块元素一样。

                    行内元素无法设置宽高，它的宽高由其内容的宽高决定。

                    块级元素和行内块元素如果不设置宽高，他们的宽高由其内容的宽高决定。

（5）使用 table：把父元素设置为：display: table; text-align: center;

                             把子元素设置为：display: table-cell; vertical-align: middle;

         该方法适用于行内元素和块级元素，但不适用于行内块元素。         

         注意：如果只有一个元素，该元素将会覆盖整个父元素，且设置的宽高将不再起作用。

                   如果不只一个元素，且所有元素的宽度和不会超过父元素的宽度时，那么块级元素的宽度会起作用，否则还是不起作用。

 

参考：

菜鸟教程对齐

阮一峰Flex布局

CSS水平垂直居中常见方法总结

CSS水平居中、垂直居中、水平垂直居中

END