元素布局与居中-垂直居中与水平居中的几种方法

HTML（在不设置css属性的情况下）根据元素类型不同而布局不同，块级元素靠左边向下排列，行内元素和行内块元素不会独占一行，可以横向排列。所以不借助css的话，页面布局就会有很大的局限性。
能够影响布局的css属性（常用）：

属性	属性值	作用
margin	xxpx	设置盒子外边距，可以理解为包裹电视机的泡沫，在外部影响了电视机与桌子的距离
padding	xxpx	设置盒子内边距，调整盒子内容的布局
position	absolute（绝对定位）relative（相对定位）fixed（固定定位）static（静态定位，默认值）	设置了absolute的元素会根据设置了定位的父元素来布局，设置了relative的元素根据自身最初的位置来布局，设置了fixed的元素根据浏览器窗体来布局，通过设置top,right,left,bottom这四个属性来控制位置
display	flex	将元素display设置成flex，代表这个盒子变成了一个弹性盒子，可以通过弹性盒子的属性来控制盒子内的布局

元素水平居中：
1，通过设置margin来实现（只对块级元素有效）：
子元素设置margin：0 auto；
2，通过设置子元素display和父元素text-align来实现：
父元素设置text-align：center
子元素设置display：