HTML设置水平居中的几种方式

HTML水平居中的几种方式
水平居中分为块级元素，行内元素和行内块状元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

• display:inline;转换为行内元素
• display:block;转换为块状元素
• display:inline-block;转换为行内块状元素

在HTML5中，可以自定义标签，在任意定义标签中，加入**display:block;**即可，当然也可以是行内或行内块状。

行内元素：常见的span，修饰字体,

行内元素特征：
            1.设置宽高无效
            2.对margin仅设置左右方向有效，上下无效；padding设置上下左右皆有效
            3.不会自动进行换行

块状元素：代表性就是div
块状元素特征:
            1.能够识别宽高
            2.margin和padding的上下左右均对其有效
            3.可以自动换行
            4.多个块状元素标签写在一起，默认排列方式是从上至下

行内块状元素：使用比较多，结合了行内元素和块状元素的特性，各有取舍

行内块状元素特征：
                1.不自动换行
                2.能够识别宽高
                3.默认排列方式为从左到右
​​​​

文字垂直居中的小技巧
CSS没有提供垂直居中的代码，这里有一个小技巧
解决方案: 让文字行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

hight:40px
line-hight:40px