CSS元素水平居中的方法总结

Posted 2020-06-17

行内：text-align:center;

定宽块状：margin:Xpx auto;

不定宽块状：

1.<table> <tbody><tr><td>，然后table即是定宽块状元素

2.display:inline然后当做行内元素处理(存在问题：少了一些功能，比如设定长度值)

3.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

  首先，父div浮起来，其左缘移动到相对于body正中间的位置；然后，子div浮起来，初始位置在其父div处，向左移动相当于父容器50%的距离，如此正好居中。

  float:left;的作用在于使div不再独占一行，而适配其内容的宽度。