水平居中设置

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

不定宽的块状元素居中有三种方法来实现。

方法一：

第一步：为需要设置居中的元素外面加入table标签（包括tbody，tr，td）

第二步：为table设置“左右margin居中

html代码

1 2 3

css代码

方法二：

第一步：改变块级元素的display为inline类型，然后使用text-align:center来居中

html代码

• 1
• 2
• 3

css代码

这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

方法三：给父元素设置float，然后给父元素postion:relative和left:50%,自元素设置position:relative和left:-50%来实现水平居中

html代码

1

2

3

css代码

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。