水平居中总结

Posted 2020-08-11

1.行内元素

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

2.块级元素

块级元素分为定宽不定宽两种

    定宽块级元素用text-align就不起作用了，此时可以设置margin：0 auto；也就是说要想用margin达到水平居中，必须满足两个条件：定宽+块状，缺一不可。

不定宽块状有三种方法：

第一种：加入table标签，设置margin（之所以可以这样是table长度自适应，即table的长度根据他文本的长度决定，并且它是块级元素，所以满足那两个条件）

<table>

  <tbody>

    <tr><td>

<ul>

     <li>我是第一行文本</li>

        <li>我是第二行文本</li>

        <li>我是第三行文本</li>

    </ul>

    </td></tr>

  </tbody>

</table>

第二种：display：inline;将块状改成行内，用text-align;

第三种：定位，position：relative;left:50%;达到居中目的;通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。