[分享]css不定宽高水平居中

CSS中，我们可以使用margin属性来实现元素水平居中的效果，但在不定宽高的情况下，并不能直接使用margin:auto来实现。下面将介绍一种实现不定宽高元素水平居中的方法。.center{ : a...

CSS中，我们可以使用margin属性来实现元素水平居中的效果，但在不定宽高的情况下，并不能直接使用margin:auto来实现。下面将介绍一种实现不定宽高元素水平居中的方法。

.center{
   position: absolute; //使元素脱离标准文档流
   left: 50%; //将元素左侧移动到父容器宽度的50%位置
   transform: translateX(-50%); //再向左移动元素宽度的50%位置
} 

上述代码中，我们使用了绝对定位来脱离标准文档流，然后通过设置left: 50%使元素左侧移动到父元素宽度的50%位置，再使用transform: translateX(-50%)向左移动自身宽度的50%位置，实现了水平居中的效果。

需要注意的是，该方法仅适用于行内元素和块级元素，并且元素的宽度不能超过父元素宽度。若需要在不定宽高的情况下实现水平垂直居中，可使用flex布局或者绝对定位加transform配合使用，具体实现方式可以参考其他相关资料。