css布局，居中总结

1.   水平居中：

①．被设置元素为行内元素，设置父元素：text-aligen:center;

②．被设置元素为块状元素，元素定宽时：margin：0px(可变) auto;

                                            ，元素不定宽时：display:inline;text-aligne:center;

③．通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

④．通过flex布局，设置父元素：display:flex;justify-content:center;

2．垂直居中：

①．父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

②．父元素高度确定的多行文本

 a、使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

 b、css中有一个用于竖直居中的属性 vertical-align：center，在父元素设置此样式时，会对inline-block类型的子元素都有用。

当元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个语句之一：

 1. position : absolute

 2. float : left 或float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

③．flex布局：设置父元素：display：flex；align-items:center; 就可实现垂直居中

3.水平垂直居中

Flex布局：设置父元素：display：flex；justify-content:center; align-items:center;