css居中样式

## CSS元素分类及CSS样式居中的方式
文章目录
前言：
一、css元素分类
行内块（内联）元素
块级元素
行内块元素
元素之间的模式转换
二、css水平居中方式
块级元素水平居中
行内元素水平居中
行内块元素水平居中
三、css垂直居中方式
行内元素垂直居中
块级元素垂直居中
行内块元素垂直居中

一、css元素分类

1、样式特点

• 内嵌式：样式只作用于当前文件，没有真正实现结构表现分离
• 外链式：作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离
• 作用范围仅限于当前标签，范围小，结构表现混在一起

2、标签分类（显示的方式）

1）行内块（内联）元素
典型代表：input img
特点：在用一行上显示、可以设置高度

2）块元素

、

、

......

、

1. 、
   • 、

     、、

     、

     、

典型代表：div h1-h6 p ul li

特点：独占一行、可设宽高、嵌套（包含）下子块元素宽高度（没有定义的情况下）和父块元素宽度默认一致

3）行内元素
、、
、、、、、、

典型代表：span a strong em lable

特点：在同一行上显示、不能直接设置宽高、元素的宽和高就是内容撑开的宽度

4） 元素之间的模式转换

块元素转换内元素:div,p{display:inline;}

行内元素转换块元素：a,span{display:block}

块元素和行内元素转行内块元素:
div,a,ui,ul{display:inline-block;}

二、css水平居中方式

1. 块级元素水平居中
   代码如下：
   
   效果图：
   

2、行内元素水平居中
代码如下

效果图：

3、 行内块元素水平居中
代码如下：

效果图：

三、css垂直居中方式

1、行内元素垂直居中
代码如下：

效果图

2、 块级元素垂直居中
代码如下

效果图

3、行内块元素垂直居中
代码如下：

效果图

总结