css不定宽怎么居中

在网页设计中，居中是一种非常重要的布局方式。而对于宽度不定的元素如何居中，CSS中提供了多种方式。

在介绍不定宽居中的方法之前，我们先来看一下如何让固定宽度的元素居中。首先需要将元素的宽度设置为固定值，然后将margin左右两侧都设置为“auto”即可：

.element {
    width: 200px; /*设置元素的宽度*/
    margin: 0 auto; /*左右margin均为auto，即可实现水平居中*/
} 

接下来，我们再来看看如何让宽度不定的元素居中。

方法一：使用text-align属性

如果元素是行内元素，可以将其容器的text-align属性设置为“center”即可实现居中：

.container {
    text-align: center; /*将容器内的行内元素居中*/
} 

注意：这种方法只适用于行内元素，如果想要让块级元素居中，需要将块级元素设置为inline-block或inline。

方法二：使用绝对定位

这种方法比较暴力，将元素的position属性设置为“absolute”，然后将左右两侧的偏移量都设置为50%。接着再通过margin-left将元素往左移自身宽度的一半，就可以实现居中：

.element {
    position: absolute; /*将元素定位为绝对定位*/
    left: 50%; /*左偏移量为50%*/
    right: 50%; /*右偏移量为50%*/
    margin-left: -100px; /*将元素往左移自身宽度的一半*/
} 

注意：这种方法需要保证元素的容器相对定位（position: relative）或绝对定位（position: absolute/fixed），否则定位的参照物会失效。

方法三：使用flex布局

Flex布局是CSS3的新特性，可以很好地解决居中问题。将元素的容器设置为display: flex，然后通过justify-content和align-items将元素水平和垂直方向都居中即可：

.container {
    display: flex; /*将容器设置为flex布局*/
    justify-content: center; /*水平居中*/
    align-items: center; /*垂直居中*/
} 

这种方法需要浏览器支持Flex布局，而且不兼容IE9以下版本。

总结：

以上三种方法都可以实现宽度不定元素的居中。如果是行内元素，可以使用text-align属性。如果是块级元素，可以使用绝对定位或Flex布局。选择哪种方法，可以根据实际情况选择最合适的方式。