[分享]css不定宽元素居中

CSS中的居中是前端开发中经常需要考虑的问题，其中不定宽元素的居中就是其中的一个难点。下面我们来介绍一下如何实现不定宽元素的居中。方法一：使用textalign属性父元素 { textalign: c...

CSS中的居中是前端开发中经常需要考虑的问题，其中不定宽元素的居中就是其中的一个难点。下面我们来介绍一下如何实现不定宽元素的居中。

方法一：使用text-align属性

父元素 {
  text-align: center;
}

子元素 {
  display: inline-block;
} 

使用text-align属性将父元素内子元素水平居中。但是，text-align仅适用于块级元素和行内块元素，而不适用于行内元素，所以需要给子元素增加display：inline-block属性。

方法二：使用transform属性

父元素 {
  position: relative;
}

子元素 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
} 

使用transform属性将子元素水平居中。首先，将父元素设为相对定位，将子元素设为绝对定位，再将left属性设置为50%。接着，使用transform的translateX将子元素向左移动了它自身宽度的一半，实现水平居中的效果。

以上两种方法都可以实现不定宽元素居中的效果，但是使用transform属性需要考虑兼容性问题。所以，在具体实现时需要根据实际情况选择哪种方法来实现。