不确定宽度的块级元素的水平居中

方法一：在没有办法通过设置固定宽度，margin-left：auto和margin-right：auto来实现居中，可以用table来实现不确定宽度的居中。

方法二：改变块级元素的display为inline类型，然后用text-align：center来实现居中。相对于方法一，不用增加无语义的标签，但也存在一定问题：它的块级元素的display类型改为inline，变成了行内元素，而行内元素比块级元素缺失一些功能。

方法三：通过给父级元素设置float，然后父元素设置position：relative和left：50%，子元素设置position：relative和left：-50%来实现水平居中。好处是保留了块级元素的作用，不会添加无语义的标签，但缺点是设置了position：relative，带来了一定的副作用。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/140

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！