css处理水平居中问题

1、水平居中设置-行内元素

通过父元素设置 1 text-align:center; ，让父元素的内容居中

2、水平居中设置-定宽块状元素

块状元素的宽度width为固定值，通过设置“左右margin”值为“auto”来实现居中的

例子：

我是定宽块状元素，我要水平居中显示。

3、水平居中设置-不定宽块状元素

方法1. 加入 table 标签

例子：

 1 
 2 
 3 
 4 
 5 
 6 
15 
16 
17 
18 
19 
24 
25 

20 

21 我要水平居中 
22 
23 
26 
27 
28 

方法2. 设置 display:inline; 方法，与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

例子：

 
 
1
 
2
 
3
 

方法3. 设置 position:relative 和 left:50% 利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

例子：

 
我们来学习一下这种方法。

ps:欢迎指正