行内元素和块级元素的区别?如何实现水平垂直居中？

区别：

行内元素无法设置width，height；根据自己的内容决定width和height；

行内元素padding-top和padding-bottom会有展示的效果，但是不会占空间，说明行内元素的padding-top和padding-bottom无效；

行内元素的margin-left，margin-right，padding-left和padding-right有效，margin-top，margin-bottom，padding-top和padding-bottom无效；

 

水平垂直居中：

行内元素：text-align:center;height:30px;line-height:30px;

块级元素：1.父标签设置：

　　　　　　display：flex；

　　　　　　justify-content：center；//水平居中

　　　　　　align-items：center；//垂直居中

　　　　　2.margin：0 auto；

　　　　　3.定位50%；

以下汇总三种行内元素转为块级元素的方法：

（1）display

• inline（行内元素）:
  1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
  2. 不能更改元素的height，width的值，大小由内容撑开. 
  3. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
• block（块级元素）:
  1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height，width的值. 
  3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
•  inline-block（融合行内于块级）:
  1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
  2. 用通俗的话讲，就是不独占一行的块级元素

（2）float

（3）position（absolute和fixed）